如何将使用jspdf和html2canvas生成的文件编码为base64？

Question

我正在尝试对附带代码生成的文档进行编码，但没有任何反应，不会生成错误，但也不会对文件进行编码，而且 ajax request 从未执行。

正确的方法是什么？

    html2canvas(document.getElementById("workAreaModel"), {
    onrendered: function(canvas)
    {
        var img = canvas.toDataURL("image/png");
        var doc = new jsPDF("l", "pt", "letter");
        doc.addImage(img, 'JPEG',20,20);
        var fileEncode = btoa(doc.output());
         $.ajax({
              url: '/model/send',
              data: fileEncode,
              dataType: 'text',
              processData: false,
              contentType: false,
              type: 'GET',
              success: function (response) {
                   alter('Exit to send request');
              },
              error: function (jqXHR) {
                  alter('Failure to send request');
              }
             });
    }
});

- ya va

---

doc.output() 返回什么？"/model/send" 是否期望 GET 请求？ - guest271314

没有调试步骤和输出，这有可能被关闭为一个“为什么这段代码不工作”的问题实例。 - danh

Answer 1

首先，jsPDF不是JavaScript的本地功能，请确保已经包含了正确的资源文件。在查看其他参考资料后，我认为您不需要使用btoa()函数将doc.output()转换，只需像这样指定：

 doc.output('datauri');

其次，base-64编码的字符串可能包含 ' + ' ，' / ' 和 ' = ' ，它们不是URL安全字符，您需要替换它们，否则您无法处理ajax请求。

然而，根据我的经验，根据文件的大小，它很容易变得非常长！在达到GET方法的字符长度限制之前，编码后的字符串会先崩溃您的Web开发工具，调试将变得困难。

我的建议是根据您的jquery代码：

processData: false,
contentType: false

通常会发送文件（File）或Blob对象，可以查看 jsPDF，它可以将您的数据转换为Blob：

doc.output('blob');

所以彻底修改你的代码：

var img = canvas.toDataURL("image/png");
var doc = new jsPDF("l", "pt", "letter");
doc.addImage(img, 'JPEG',20,20);
var file = doc.output('blob');
var fd = new FormData();     // To carry on your data  
fd.append('mypdf',file);

$.ajax({
   url: '/model/send',   //here is also a problem, depends on your 
   data: fd,           //backend language, it may looks like '/model/send.php'
   dataType: 'text',
   processData: false,
   contentType: false,
   type: 'POST',
   success: function (response) {
     alter('Exit to send request');
   },
   error: function (jqXHR) {
     alter('Failure to send request');
   }
});

如果您在后端使用PHP，您可以查看数据信息：

echo $_FILES['mypdf'];

- Carr

---

谢谢，我需要使用doc.output('blob'); - ya va

卡尔，为什么你跳过了URL编码步骤呢？那样URL是安全的吗？ - Max

@Arendax，doc.output('datauri')已经为您提供了一个以base64编码的二进制数据字符串。 - Carr

@Carr 好的，但我需要使用 doc.output('blob')。最终我没有使用您的方法，而是选择了另一种方法，所以没关系。 - Max

更新于2021年，这需要使用doc.output("datauristring")。 - Dex

Answer 2

这段代码用于从屏幕捕获HTML页面并将其保存为PDF文件，然后以二进制大对象（blob）的形式发送到后端API。

const filename = 'form.pdf';
    const thisData = this;
    this.printElement = document.getElementById('content');
     html2canvas(this.printElement).then(canvas => {
      this.pdfData = new jsPDF ('p', 'mm', 'a4');
      this.imageHeight = canvas.height * 208 / canvas.width;
      this.pdfData.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 208, this.imageHeight);
      this.pdfData.save(filename);
      this.uploadFile(this.pdfData.output('blob'));
    });
  }
  uploadFile(pdfFile: Blob) {
    this.uploadService.uploadFile(pdfFile)
      .subscribe(
       (data: any) => {
        if (data.responseCode === 200 ) {
          //succesfully uploaded to back end server
        }},
       (error) => {
         //error occured
       }
     )
  }

- Lijo