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");
};

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

<script>
import { downloadPDF } from "@/utils/pdf.js"; // 工具方法，导出操作
export default {
  name: "referralDetail",
  data() {
    return {
      infoObj: {},
      titleArr: [
        { value: "xxx", label: "患者姓名"},
        { value: "xxx", label: "身份证号"},
        { value: "xxx", label: "性别"},
        { value: "xxx", label: "联系方式"},
        { value: "xxx", label: "转入机构"},
        { value: "xxx", label: "转诊类型"},
        { value: "xxx", label: "审批医生"},
        { value: "xxx", label: "接收科室"},
        { value: "xxx", label: "转出机构"},
        { value: "xxx", label: "转出科室"},
        { value: "xxx", label: "转出医生"},
        { value: "xxx", label: "申请日期"},
        { value: "xxx", label: "转诊状态"},
        { value: "xxx", label: "医保类型"},
        { value: "xxx", label: "主要诊断"},
        { value: "xxx", label: "病情等级"}
      ],
    };
  },
  created() {
    if (this.$route.query) {
      this.infoObj = this.$route.query.infoData;
    }
  },
  methods: {
    // 导出
    handleExport(name) {
      //调用打印方法（打印区域，导出名称）
      downloadPDF(this.$refs.print, name);
    },
    // 倒退
    toBack() {
      this.$router.go(-1);
    },
  },
};
script>
 
<style lang="less" scoped>
 
style>

• 界面效果如下： 

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