前端Vue页面生成PDF

0、前言

最近项目有个开发需求，将表格数据导出生成PDF，这种方法可以有两种。

• 一种是直接调用打印，用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差，且体验不好，显然不是我们想要的效果。
• 首先生成报告页面，也就是常规页面；然后将页面转换成图片（ 用到的组件 html2canvas ）；最后将图片导出成PDF（ 用到的组件 jspdf ）。

1、安装依赖

npm install --save html2canvas  // 页面转图片
npm install jspdf --save  // 图片转pdf

2、导出图片转PDF

新建一个 index.vue 页面：

<template>
  <div ref="pdf">
    这是待转换的页面，点击 
    <button @click="handleExport">导出</button> 按钮，完成导出操作。
  </div>
</template>

<script>
import {
    
    downloadPDF} from "@/util/pdf.js"  //工具方法，导出操作
export default {
    
    
  name: "pdf",
  data() {
    
    
    return {
    
    };
  },
  methods: {
    
    
    handleExport(){
    
    
      downloadPDF(this.$refs.pdf)
    }
  }
};
</script>

按钮点击事件中调用了一个工具方法 downloadPDF()，来自于工具类 pdf.js：
因为部分需求有需要生成的页面使用A4纸打印，那么pdf生成时的宽高尺寸就不能像上面一样设定。需要按照A4纸的尺寸比例调整（其它打印需求同理，使用对应纸张比例即可）

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export const downloadPDF = (page) => {
    
    
  html2canvas(page).then(function (canvas) {
    
    
    canvas2PDF(canvas)
  })
}

const canvas2PDF = (canvas) => {
    
    
  let contentWidth = canvas.width
  let contentHeight = canvas.height

  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
  let imgWidth = 595.28
  let imgHeight = (592.28 / contentWidth) * contentHeight

  // 第一个参数： l：横向  p：纵向
  // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
  let pdf = new jsPDF('p', 'pt')

  pdf.addImage(
    canvas.toDataURL('image/jpeg', 1.0),
    'JPEG',
    0,
    0,
    imgWidth,
    imgHeight
  )

  pdf.save('导出.pdf')
}