vue将页面保存为pdf 使用 jspdf 和 html2canvas

1.安装

npm install jspdf

npm install html2canvas

 2.引入

  import { jsPDF } from 'jspdf'
  import html2canvas from 'html2canvas'

3.使用

页面<div id="body">...</div>

点击按钮

download () {
        const that = this
        // 要形成图片的div
        const canvas2 = document.getElementById('body')
        html2canvas(canvas2, {
          imageTimeout: 15000,
          logging: false,
          scale: 2
        }).then(function (canvas) {
          // 获取canvas画布的宽高
          var contentWidth = canvas.width / 2
          var contentHeight = canvas.height / 2
          //一页pdf显示html页面生成的canvas高度;
          // 设置边框
          const padding = 10
          // 到pdf里的页面高度
          var pageHeight = contentWidth / (592.28 - padding * 2) * (841.89 - padding * 2)
          //未生成pdf的html页面高度
          var leftHeight = contentHeight
          //页面偏移
          var position = 0
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595.28 - padding * 2
          var imgHeight = (595.28 - padding * 2)/contentWidth * contentHeight
          var pageData = canvas.toDataURL()
          var PDF = new jsPDF('p', 'pt', 'a4') // 第一个参数 p竖向 1横向
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', padding, padding, imgWidth, imgHeight )
          }else {
            while(leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', padding, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89 - padding * 2
              //避免添加空白页
              if(leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          const title = that.param.isYer ? that.param.year + '年入料质量统计.pdf' : that.param.year + '年' + that.param.month + '月入料质量统计.pdf'
          PDF.save(title)
        })
      },

 html2canvas 配置参数 

名称	默认	描述
useCORS	FALSE	是否尝试使用CORS从服务器加载图像
allowTaint	FALSE	是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
proxy	null	代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。
backgroundColor	#ffffff	画布背景色（如果未在DOM中指定）。设置null为透明
canvas	null	现有canvas元素用作绘图的基础
foreignObjectRendering	FALSE	如果浏览器支持，是否使用ForeignObject渲染
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
ignoreElements	(element) => false	谓词功能，可从渲染中删除匹配的元素。
logging	TRUE	启用日志以进行调试
onclone	null	克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。
removeContainer	TRUE	是否清除html2canvas临时创建的克隆DOM元素
scale	window.devicePixelRatio	用于渲染的比例。默认为浏览器设备像素比率。
width	Element 宽度	canvas的宽度
height	Element 高度	canvas的高度
X	Element X偏移	裁剪画布X坐标
ÿ	Element y偏移	裁剪画布y坐标
scrollX	Element 滚动X	渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed）
scrollY	Element 滚动Y	呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed）
windowWidth	Window.innerWidth	渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容
windowHeight	Window.innerHeight	渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容

 jspdf()

第一个参数： l：横向  p：纵向

第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）

第三个参数：可以是下面格式，默认为“a4”

• a0 - a10
• b0 - b10
• c0 - c10
• dl
• letter
• government-letter
• legal
• junior-legal
• ledger
• tabloid
• credit-card

pdf.addImage()  将图像添加到PDF,addImage参数设置如下

imageData	canvas图像
format	文件格式，默认jpeg
x	相当于 left 距左边位置x开始
y	相当于 top 距上边位置y开始
width	图片的宽度（单位是申明时的单位）
height	图片的高度（单位是申明时的单位）