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

pdf generation - Issues with generating good Quality pdf from javascript libraries: jspdf and html2canvas

本文关键字：pdf 问题 jspdf html2canvas 高质量 生成 javascript      更新时间：2023-09-26

好吧，我正在开发一个生成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
            }); 
        }
    }

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

您可以使用此代码，您的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');
    }
})
相关文章：