如何使用html2canvas JS将当前屏幕下载为PDF和图像?

丽兹

我想使用html2canvas.js将当前屏幕下载为PDF /图像。

1)将当前屏幕下载为图像以下代码对我来说很好用。

的HTML

<head>
  <script src="html2canvas.js"></script>
  <script src="jquery.min.js"></script>
</head>
<body>
   <button onclick="download()" class="btn btn-danger">Download</button>
</body>

JS

function download(){
  html2canvas(document.body, {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      a.href = canvas.toDataURL("image/jpeg");
      a.download = $.now()+'.jpg';
      a.click();
    }
  });
}

2)将当前屏幕下载为PDF如何使用html2canvas.js实现此功能?如何将当前屏幕下载并保存为PDF?

请帮助。谢谢!

乔姆勒

我已经看到下载html2canvas不起作用pdf但是tehre是一个称为JsPDF的工具

试试这个 -

HTML代码

<canvas id="canvas" width="480" height="320"></canvas> 
<button id="download">Download Pdf</button>

JS代码

html2canvas($("#canvas"), {
    onrendered: function(canvas) {         
        var imgData = canvas.toDataURL(
            'image/png');              
        var doc = new jsPDF('p', 'mm');
        doc.addImage(imgData, 'PNG', 10, 10);
        doc.save('sample-file.pdf');
    }
});

jsfiddle: http : //jsfiddle.net/p4s5k59s/490/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用html2canvas JS将当前屏幕下载为PDF和图像?

来自分类Dev

如何使用html2canvas和jspdf以适当且简单的方式导出为pdf

来自分类Dev

如何使用HTML2canvas将img保存到用户的本地计算机

来自分类Dev

使用Html2Canvas的Textarea屏幕截图

来自分类Dev

使用html2canvas和jspdf将html页面截图转换为pdf

来自分类Dev

使用 html2canvas 和 php 将 div 数据转换为图像

来自分类Dev

html2canvas无法捕获图像

来自分类Dev

html2canvas无法捕获图像

来自分类Dev

html2canvas捕获div图像

来自分类Dev

点击html2canvas裁剪图像

来自分类Dev

html2canvas 层为空白

来自分类Dev

TypeScript和Html2Canvas?

来自分类Dev

JSPDF 和 html2canvas 与 Angular

来自分类Dev

如何在base64中对使用jspdf和html2canvas生成的文件进行编码?

来自分类Dev

如何将html2canvas图像保存到jquery的系统文件夹中

来自分类Dev

使用HTML2CANVAS将莫里斯图表保存为图像

来自分类Dev

使用HTML2CANVAS将莫里斯图表保存为图像

来自分类Dev

结合使用html2canvas和jsPDF来保存页面的PDF

来自分类Dev

使用 html2canvas 将带有 highcharts 图形的 html 转换为图像

来自分类Dev

ionic cordova angular html2canvas 和 pdfMake 在手机上的 pdf 文件中下载屏幕截图

来自分类Dev

如何使用html2canvas和FileSaver在dowllaods文件夹中而不是在浏览器中下载div的内容?

来自分类Dev

HTML2Canvas将溢出的内容转换为图像

来自分类Dev

angularjs不安全:数据; 使用html2canvas捕获屏幕截图时

来自分类Dev

使用html2canvas将highcharts图表呈现为pdf在IE和Firefox上不起作用

来自分类Dev

在jQuery中使用html2canvas将html元素导出到Png文件时,如何设置自定义文件名?

来自分类Dev

html2canvas无法呈现图像(外部托管的图像)

来自分类Dev

html2canvas没有获得完整的图像高度

来自分类Dev

在toDataURL之前缩放图像-html2canvas

来自分类Dev

HTML2Canvas在IOS上提供空白图像

Related 相关文章

  1. 1

    如何使用html2canvas JS将当前屏幕下载为PDF和图像?

  2. 2

    如何使用html2canvas和jspdf以适当且简单的方式导出为pdf

  3. 3

    如何使用HTML2canvas将img保存到用户的本地计算机

  4. 4

    使用Html2Canvas的Textarea屏幕截图

  5. 5

    使用html2canvas和jspdf将html页面截图转换为pdf

  6. 6

    使用 html2canvas 和 php 将 div 数据转换为图像

  7. 7

    html2canvas无法捕获图像

  8. 8

    html2canvas无法捕获图像

  9. 9

    html2canvas捕获div图像

  10. 10

    点击html2canvas裁剪图像

  11. 11

    html2canvas 层为空白

  12. 12

    TypeScript和Html2Canvas?

  13. 13

    JSPDF 和 html2canvas 与 Angular

  14. 14

    如何在base64中对使用jspdf和html2canvas生成的文件进行编码?

  15. 15

    如何将html2canvas图像保存到jquery的系统文件夹中

  16. 16

    使用HTML2CANVAS将莫里斯图表保存为图像

  17. 17

    使用HTML2CANVAS将莫里斯图表保存为图像

  18. 18

    结合使用html2canvas和jsPDF来保存页面的PDF

  19. 19

    使用 html2canvas 将带有 highcharts 图形的 html 转换为图像

  20. 20

    ionic cordova angular html2canvas 和 pdfMake 在手机上的 pdf 文件中下载屏幕截图

  21. 21

    如何使用html2canvas和FileSaver在dowllaods文件夹中而不是在浏览器中下载div的内容?

  22. 22

    HTML2Canvas将溢出的内容转换为图像

  23. 23

    angularjs不安全:数据; 使用html2canvas捕获屏幕截图时

  24. 24

    使用html2canvas将highcharts图表呈现为pdf在IE和Firefox上不起作用

  25. 25

    在jQuery中使用html2canvas将html元素导出到Png文件时,如何设置自定义文件名?

  26. 26

    html2canvas无法呈现图像(外部托管的图像)

  27. 27

    html2canvas没有获得完整的图像高度

  28. 28

    在toDataURL之前缩放图像-html2canvas

  29. 29

    HTML2Canvas在IOS上提供空白图像

热门标签

归档