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');
              }
             });
    }
});

Answer 1

首先，jsPDF在javascript中不是原生的，请确保你已经包含了正确的源代码，并且在查看了其他引用之后，我认为你不需要btoa（）函数来转换doc.output（），只需指定像这样：

 doc.output('datauri');

其次，base-64编码的字符串可以包含'+'，'/'，'='，它们不是网址安全字符，您需要替换它们或者您无法处理ajax。

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

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

processData: false,
contentType: false

发送可能文件或 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'];

Answer 2

此代码用于从屏幕捕获HTML页面并另存为Pdf并作为blob发送到后端api

 void _submitForm(
      Function addProduct, Function updateProduct, Function setSelectedProduct,
      [int selectedProductIndex]) {
    if (!_formKey.currentState.validate() || (_formData['image'] == null && selectedProductIndex == -1)) {
      return;
    }
    _formKey.currentState.save();
    if (selectedProductIndex == -1) {
      addProduct(
          _titleTextController.text,
          _descriptionTextController.text,
          _formData['image'],
          _formData['price'],
          _formData['location']).then((bool success) {
        if (success) {
          Navigator
              .pushReplacementNamed(context, '/products')
              .then((_) => setSelectedProduct(null));
        } else {
          showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('Something went wrong'),
                  content: Text('Please try again!'),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: Text('Okay'),
                    )
                  ],
                );
              });
        }
      });
    } else {
      updateProduct(
        _titleTextController.text,
        _descriptionTextController.text,
        _formData['image'],
        _formData['price'],
        _formData['location'],
      ).then((_) => Navigator
          .pushReplacementNamed(context, '/products')
          .then((_) => setSelectedProduct(null)));
    }
  }

如何在base64中编码用jspdf和html2canvas生成的文件？

2 个答案: