vue的移动端项目使用 html2Canvas + JsPDF ,将html转成pdf并导出pdf,问题记录

4,453 阅读1分钟

最近,vue的h5项目,需要导出报名表,类似这种;并将报名表进行打印。 这种使用场景,适用于考生在手机上操作。

image.png

网上查看了一些,知道大概有如下几种方案.

  • window.print
  • vue-print-nb
  • html2canvas + jspdf

由于自己的是移动端项目,所以选择了 html2canvas + jspdf

导入:html2canvas + jspdf 大概原理

  • html2canvas 将html转成图片
  • jspdf将图片保存为pdf

一、 以下是使用 html2canvas + jspdf 在vue的移动端项目中遇到的一些问题

注:是在pc浏览器中模拟移动端操作的。

问题1: 由于有横向滚动条,导出pdf的时候,导致显示的pdf显示不全 13288.gif 解决:

设置对应的宽度,就可以解决了 image.png

问题2: 导出的pdf 文件太大 1328888.gif 解决:

将 image/png 改为 image/jpeg。 jpeg占用的体积更小。 image.png

问题3: 在pc端模拟移动端可以导出pdf,但是在真正的手机上,导出pdf失败(目前chorme手机浏览器可以成功导出)。

  • 从微信内置的浏览器中打开,情况如下:提示 下载失败 111.gif
  • 从‘夸克’手机浏览器导出pdf,情况如下:提示非法的下载链接 1115.gif
  • 从 ‘QQ’手机浏览器,导出pdf,情况如下: 111598.gif
  • chrome手机浏览,导出pdf,情况如下:成功OK 11159.gif

二、由于这个项目,是用在微信公众号里面。最终。还是选择直接保存为图片

使用 html2canvas 将html转成 图片,用户在微信浏览器中,长按进行保存。

参考链接