使用计算属性的mailto链接未加载完整的消息正文

Question

mailto 链接已正确加载收件人和主题，但似乎将电子邮件正文截断为非常短的长度。我的电子邮件总共有 1500 个字符，因此低于 mailto 限制。该电子邮件的正文似乎被截断了大约 200 个字符。

我将一个计算属性附加到 mailto 字符串，因为我使用一个名为“marked.js”的包，它将用户输入解析为 markdown/html。

我该如何解决这个问题？我尝试将新的数据属性设置为“emailFormat”，并在页面安装上通过标记的包运行电子邮件正文，然后设置为数据属性。我认为这可以解决问题，因为现在我只是将一个字符串附加到 mailto 正文，但这并没有起作用，我仍然得到不完整的电子邮件正文。

接收 api 响应数据并通过标记的包运行的计算属性

letterContentToHtml() {
                if (this.formData.letterContent != null) {
                    return marked(this.formData.letterContent); // marked is package to parse user input to markdown/html. 
                }
                else {
                    return null;
                }
            },

显示内容的模板部分和包含 mailto href 的按钮

<p class="email-content-data" v-html="letterContentToHtml"></p>
<v-btn class="send-form-btn"
            :disabled="!campaignFormValid || this.emailRecepients == ''"
            elevation="12"
            color="primary"
            target="_blank" 
            :href="mailToString"
            @click="updateCampaignList">
                Send Email!
        </v-btn>

mailto 计算属性

mailToString() {
                return "mailto:"+this.formData.emailList+"?subject="+this.formData.subject+"&body="+this.emailContent;
            },

Answer 1

在将数据分配给超链接/锚标记的 HREF 属性之前，您必须对数据进行 URL 编码：

mailToString()
{
  return "mailto:" + encodeURIComponent(this.formData.emailList) + "?subject=" + encodeURIComponent(this.formData.subject) + "&body=" + encodeURIComponent(this.emailContent);
},

否则可能会干扰一些保留字符，例如? 或 = 或 & 或某些 Unicode 字符。