从 javascript 库生成高质量 pdf 的问题：jspdf 和 html2canvas

Question

嗯，我正在开发一个生成 pdf 输出的实用工具。数据是从用户那里获取的，经过一些操作后被转换成预定义的格式，然后需要 .pdf 格式，并且所有 css 都完好无损。

它完全是一个客户端应用程序。

我为此使用jsPdf + html2canvas。但我有以下担忧：

1. 首先，找不到任何 API 文档。我仍在使用在各个站点上找到的代码片段。
2. 无论如何，我的输出质量远未达到预期。
3. 当我的 HTML 文档大到可以占据多页时，我仍然只能获得第一页的 pdf。 （我想这是由于我缺乏知识，也是由于缺乏文档。）

我见过，有很多类似的问题。我几乎尝试了所有这些，很少有根本不起作用，很少触发一些错误，我仍然卡住了。

所以我的查询：

1. 是我的选择，适合制作高质量的 pdf（至少 80%-90% 在屏幕上可见）。如果有人可以指导我输出高质量的 jspdf 和 html2canvas，我将不胜感激。

2. 请指导有关这些库的正确文档。我目前拥有的是 github 中的 zip 文件提供的 doc 文件夹，这肯定不足以充分利用它。

3. 如果这种方法不可行，请直接使用更好的产品。质量是我们的最高要求，性能可以协商。为付费图书馆做好准备。但更喜欢客户端工具（因为实际上不需要服务器端实现）。

我针对上述查询发布了问题，但以防万一，我的代码：

function previewCtrlFn($scope, Database){
        var vm = this;
        vm.resume = Database.resume;
        console.log(angular.toJson(vm.resume));
        vm.pdf = createPDF;

        var form = $('#aa'),
             width = form.width(),
             a4  =[ 615.28,  841.89];  

        function createPDF(){
         getCanvas().then(function(canvas){
          var 
          img = canvas.toDataURL("image/png"),
          doc = new jsPDF({
                  unit:'px', 
                  format:'a4'
                });     
        doc.addImage(img, 'JPEG', 5, 5);
        doc.save('resume.pdf');
        form.width(width);
         });
        }

        // create canvas object
        function getCanvas(){
         form.width((a4[0]*1.33333) -80).css('max-width','none');
         return html2canvas(form,{
             imageTimeout:1000,
             removeContainer:true
            }); 
        }
    }

我真的需要一些快速帮助。

Answer 1

您可以使用此代码，您的 pdf 大小和质量将会提高

html2canvas(body,{
    onrendered:function(canvas){
        var img=canvas.toDataURL("image/png");
        console.dir(canvas);
        var pdf=new jsPDF("p", "mm", "a4");
        var width = pdf.internal.pageSize.width;    
        var height = pdf.internal.pageSize.height;
        pdf.addImage(canvas, 'JPEG', 0, 0,width,height);
        pdf.save('test11.pdf');
    }
})