将画布转换为 PDF

Posted 2023-02-24

【中文标题】将画布转换为 PDF

【英文标题】：Convert canvas to PDF

【发布时间】：2014-07-04 01:59:25

【问题描述】：

是否可以使用 javascript（pdf.js 或类似的东西）直接将画布转换为 pdf？

是否有另一种可能的方式，例如 canvas to img 然后 img to pdf？

你能举个例子吗？

【参考方案1】：

您可以通过使用jsPDF 库和toDataURL 函数来实现此目的。

我做了一个小示范：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// draw a blue cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();

download.addEventListener("click", function() 
  // only jpeg is supported by jsPDF
  var imgData = canvas.toDataURL("image/jpeg", 1.0);
  var pdf = new jsPDF();

  pdf.addImage(imgData, 'JPEG', 0, 0);
  pdf.save("download.pdf");
, false);

<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>


<canvas id="myCanvas"  ></canvas>
<button id="download">download</button>

【讨论】：

很好，谢谢 :) 有什么方法可以导出与 img 大小（宽度/高度）相同的 pdf？

有可能，但您必须编辑 jsPDF 库才能做到这一点。

嗯...尝试了，但是 addImage 行返回错误...我认为该函数可能已被替换？

@MateuszBartkowski 我认为这是一个错误。它是在有人编辑我的答案以获得代码 sn-p 时添加的。

图片总是黑底，我可以改成透明还是白色？

【参考方案2】：

请参阅https://github.com/joshua-gould/canvas2pdf。该库创建您的画布元素的 PDF 表示形式，这与将图像嵌入 PDF 文档的其他建议解决方案不同。

//Create a new PDF canvas context.
var ctx = new canvas2pdf.Context(blobStream());

//draw your canvas like you would normally
ctx.fillStyle='yellow';
ctx.fillRect(100,100,100,100);
// more canvas drawing, etc...

//convert your PDF to a Blob and save to file
ctx.stream.on('finish', function () 
    var blob = ctx.stream.toBlob('application/pdf');
    saveAs(blob, 'example.pdf', true);
);
ctx.end();

【讨论】：

由于这个库不是简单地将画布渲染为 jpeg 并将其放入 PDF 中，它创建了一个高质量/高分辨率的 pdf

不错的库，但不支持drawmage()，所以不能在PDF上添加位图图像

增加了对图片的支持。请在joshua-gould.github.io/canvas2pdf/demo.html查看图片示例。

可惜不支持上下文转换，即ctx.setTransform(2,1,0.5,1,0,1);图片看起来一样

多层画布怎么样？

【参考方案3】：

所以今天，jspdf-1.5.3。 回答 pdf 文件页面与画布完全相同的问题。在多次尝试不同的组合之后，我认为你必须做这样的事情。 我们首先需要为输出的 pdf 文件设置正确的方向的高度和宽度，否则可能会切断边。然后我们从“pdf”文件本身获取尺寸，如果您尝试使用画布的尺寸，边可能会再次被切断。我不知道为什么会这样，我最好的猜测是 jsPDF 转换库中其他单位的尺寸。

  // Download button
  $("#download-image").on('click', function () 
    let width = __CANVAS.width; 
    let height = __CANVAS.height;

    //set the orientation
    if(width > height)
      pdf = new jsPDF('l', 'px', [width, height]);
    
    else
      pdf = new jsPDF('p', 'px', [height, width]);
    
    //then we get the dimensions from the 'pdf' file itself
    width = pdf.internal.pageSize.getWidth();
    height = pdf.internal.pageSize.getHeight();
    pdf.addImage(__CANVAS, 'PNG', 0, 0,width,height);
    pdf.save("download.pdf");
  );

从这里了解如何切换方向： https://github.com/MrRio/jsPDF/issues/476

【讨论】：

谢谢，您的回答很有帮助。

太棒了，非常感谢！

【参考方案4】：

更好的解决方案是使用 Kendo ui draw dom 导出为 pdf-

假设以下 html 文件包含 canvas 标签：

<script src="http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>

    <script type="x/kendo-template" id="page-template">
     <div class="page-template">
            <div class="header">
              
            </div>
            <div class="footer" style="text-align: center">
               
                <h2> #:pageNum# </h2>
            </div>
      </div>
    </script>
    <canvas id="myCanvas"  ></canvas>
    <button onclick="ExportPdf()">download</button>

现在在你的脚本中写下以下内容，它就会完成：

function ExportPdf() 
kendo.drawing
    .drawDOM("#myCanvas", 
     
        forcePageBreak: ".page-break", 
        paperSize: "A4",
        margin:  top: "1cm", bottom: "1cm" ,
        scale: 0.8,
        height: 500, 
        template: $("#page-template").html(),
        keepTogether: ".prevent-split"
    )
        .then(function(group)
        kendo.drawing.pdf.saveAs(group, "Exported_Itinerary.pdf")
    );

就是这样，在该画布上写下任何内容，然后只需按下下载按钮即可全部导出为 PDF。 这是 Kendo UI 的链接 - http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom

【讨论】：

很酷，但贵得让人望而却步