使用JavaScript库生成高质量PDF时出现问题：jspdf和html2canvas

Question

我正在开发一个实用工具，可以生成PDF输出。数据从用户那里获取，经过一些操作后转换成预定义格式，然后需要将其转换为带有所有CSS的.PDF格式。

这是完全客户端应用程序。

我使用了jsPdf + html2canvas来完成这个工具。但我有以下顾虑：

1. 首先，找不到任何API文档。我仍在使用在各个网站上找到的代码片段。
2. 无论如何，我所达到的输出质量远远低于预期。
3. 当我的HTML文档足够大以占据多个页面时，我仍然只能得到第一页的PDF。（我猜这是由于我的知识缺乏，再次由于缺乏文档。）

我看到有很多类似的问题。我几乎尝试了所有的方法，有些根本不起作用，有些会触发一些错误，我仍然卡在那里。

所以我的问题是：

1. 我的选择是否适合生成良好质量的PDF（至少80%-90%的屏幕可见性）。如果有人能指导我使用jspdf和html2canvas制作高质量输出，我将不胜感激。

2. 请指导这些库的适当文档。我目前拥有的是在github中提供的doc文件夹和zip文件，这显然不足以让我从中获得最佳效果。

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

我真的需要您快速帮助解决这个问题。

- Saurabh Tiwari

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

- Ravi Guru

---

你为什么要声明img却从未使用它？哪个差异修复了他的问题？你为什么要将img声明为png，然后添加一个JPEG？ - Jtcruthers