如何对使用 jspdf 和 html2canvas 生成的文件进行 Base64 编码？

我正在尝试对附加代码中生成的文档进行编码，但没有任何反应，不会生成错误，但也不会对文件进行编码，并且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');
              }
             });
    }
});

首先，jsPDF不是javascript中的原生，请确保您已包含正确的源代码，在查看其他参考资料后，我认为您不需要 btoa() 函数来转换 doc.output()，只需指定如下：

 doc.output('datauri');

其次，base-64编码的字符串可能包含' + ' , ' / ' , ' = '， 他们不是URL safe字符，你需要替换它们，否则你无法处理ajax。

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

我的建议，根据你的jquery代码

processData: false,
contentType: false

发送也许是常见的设置File or 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'];