在vue中将网页保存成pdf并解决html2canvas生成截图不全问题

本来写完的文章，但是最近又发现了新的解决办法，现在更新一下

说个偷懒的办法，直接调用window.print() 方法就可以开启浏览器自带的打印功能。

如果还需要只截取网页部分可以在截图前将body替换掉，方法有很多可自行百度。

下面在说一种方法

首先引入两个工具，这里借用jspdf和html2canvas两个工具生成

这里是下载链接 https://download.csdn.net/download/sunyv1/12424774
下面示范的是网络链接，但是那个生成会出现最下面的问题，建议用上面链接下载的
在index.html中引入(全局引入)
本来想用包管理器的，结果jspdf死活下载不下来

<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

我这里是不想页面太乱所以单独写了个方法放在pdf.js(随便建在哪，待会能找到就行)

编辑器可能会报红，不用管

export const downPdf = (id) => {
  html2canvas(
    document.getElementById(id),
    {
      dpi: 172,//导出pdf清晰度
      onrendered: function (canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //pdf页面偏移
        var position = 0;
        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
        var imgWidth = 595.28;
        var imgHeight = 592.28 / contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jsPDF('', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf.save('content.pdf');
      },
      //背景设为白色（默认为黑色）
      background: "#fff"
    })
}

来到要使用的页面引入并使用

<template>
  <div class="mbti">
    <button @click="downPdf">下载</button>
    <div id="mbti" class="home">
    这里是你要生成pdf的部分
    </div>
  </div>
</template>

<script>
import { downPdf } from '../lib/pdf';  // 引入刚刚定义的方法，路径是你自己建的
export default {
  methods: {
    downPdf() {
      downPdf("mbti")
    }
  }
}
</script>

<style lang="less" scope="scoped">
</style>

正常来说到这里就结束了的，但是我在用的时候还遇到了许多坑。下载下来的PDF时不时的缺点什么还有就是生成的PDF位置也有问题，这些是超出屏幕的部分

这是由于html2canvas生成图片的时候不全导致的。我也是找了许多解决方案，下面分享两个：

1.显示被截取的元素绝不能有 overflow: hidden;，否则超出的部分就无法截取。

2.超过屏幕的部分截取异常，但是把屏幕滑到最顶端截取就正常了(我也不知道html2canvas出什么毛病)。既然是这样那就在截取之前加入以下代码，强制跳到顶端就能解决了。

window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0;

这里再做一个记录，就是从npm下载的包可能有问题导致截图不全，这里上传一份我的文件
点击这里下载

至此呢已经可以解决功能问题了，如果你们还有更好的解决方案欢迎留言。