前端导出页面为PDF

前端通过html2canvas和JsPDF插件将全部或部分网页按照PDF图片导出

建议放入项目中工具文件夹下，部分引入。

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

/******* 
 * @description: 导出页面为PDF格式
 * @param {*} id  需要导出页面区域的DOM id
 * @param {*} title PDF文件名
 * @param {*} direction l：横向  p：纵向
 * @return {*}
 */

export const getPdf = (id = '#pdfDom', title = 'PDF文件', direction = 'p') => {
  html2Canvas(document.querySelector(id), {
    allowTaint: true,
    taintTest: false,
    useCORS: true,
    // y: 72, // 对Y轴进行裁切
    // width:1200,
    // height:5000,
    dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
    scale: 6 //按比例增加分辨率 
  }).then(function (canvas) {
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    // 一页pdf显示html页面生成的canvas高度，a4纸的尺寸（595.28,841.89）
    let pageHeight = contentWidth / 595.28 * 841.89
    let leftHeight = contentHeight
    // 页面偏移
    let position = 0
    // a4纸的尺寸（595.28,841.89），html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 595.28
    let imgHeight = 595.28 / contentWidth * contentHeight
    // canvas 转换图片数据
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    // 新建JsPDF对象, 第一个参数： l：横向  p：纵向;第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）;第三个参数：可以是下面格式，默认为“a4”
    let PDF = new JsPDF(direction, 'pt', 'a4')
    // 判断是否分页
    if (leftHeight < pageHeight) {
      // 在PDF.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
      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(title + '.pdf')
  })
}