vue pc端/手机移动端 — 下载导出当前表格页面pdf格式

一、需求：在手机端/pc端实现一个表格页面（缴费单/体检报告单等）的导出功能，便于用户在本地浏览打印。

二、实现：之前在pc端做过预览打印的功能，使用的是print.js之类的方法让当前页面直接唤起打印机的打印预览功能，但是手机端这种方式不太友好，所以采用如下方式实现：

1.将要打印的页面转换成图片（ 用到的组件 html2canvas ）；

2.然后将图片导出成PDF（ 用到的组件 jspdf ）。

• 安装依赖：

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

• 在utils文件夹创建一个pdf.js文件，实现页面转图片导出成A4纸大小的pdf文件；

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

/**
 * 导出pdf 
 * @param {*} page 要打印的区域
 * @param {*} name 下载导出的名字
 */
export const downloadPDF = (page, name) => {
  html2canvas(page).then(function (canvas) {
    canvas2PDF(canvas, name);
  });
};

//图片转pdf
const canvas2PDF = (canvas, name) => {
  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(name + "报告单.pdf");
};

• 在要打印的页面触发这个下载导出的方法；

• 界面效果如下： 

•  点击导出按钮得到的pc端查看效果如下：