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

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

<template>
  <div class="referralDetail">
    <van-nav-bar
      title="报告单"
      left-arrow
      class="blue-bar"
      @click-left="toBack"
    ></van-nav-bar>
    <!-- ref="print" 设置要打印的区域 -->
    <div class="drawerBody" id="print" ref="print">
      <h1 class="formTitle">{{ infoObj.fromHospitalName || "" }}报告单</h1>
      <span class="zzCode">报告编码：{{ infoObj.twrCode }}</span>
      <div class="formContent">
        <div v-for="item in titleArr" :key="item.label" class="contentItem">
          <div class="itemTitle">
            <span>{{ item.label }}</span>
          </div>
          <div class="itemContent">
            <span>{{ infoObj[item.value] }}</span>
          </div>
        </div>
      </div>
    </div>
    <van-tabbar class="content-tabbar">
      <div class="content-tabbar-block">
        <van-button
          size="normal"
          color="#3378E0"
          @click="handleExport(infoObj.fromHospitalName)"
        >
          导出
        </van-button>
      </div>
    </van-tabbar>
  </div>
</template>
<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端查看效果如下：