ATP应用测试平台——关于网页表格的打印及PDF下载的实战案例

Posted 2021-09-06 北溟溟

前言

在网站应用中，我们可能会有这样一个需求，将网页的部分内容，例如表格，网页片段下载打印或者导出PDF，本小节内容正是关于这样一个内容的实战，基于vue2环境开发，希望能够帮助到你。源码地址：https://gitee.com/northcangap/atp，效果如下：

正文

• 源码TablePrint.vue

<template>
  <div class="container">
    <div class="title">
      <span>TablePrint示例</span>
      <el-divider direction="vertical"></el-divider>
      <router-link to="home">
        <span style="font-size: 18px;">退出</span>
      </router-link>
    </div>
    <el-divider>Test Staring</el-divider>
    <div id="bill_content" style="width: 650px;text-align: center;font-size: 16px;padding: 0 40px;">
      <h4 style="text-align: center;font-size: 18px;">XXX信息反馈单</h4>
      <div style="float: right;">
        <span style="margin-right: 40px;">QS20123247</span>
        <span style="margin: 20px;">版本号：A</span>
      </div>
      <table height=40 cellPadding=1 width='100%' align=center border=1
             style="border: 1px solid black;border-collapse: collapse;border-spacing: 0;table-layout: fixed;text-align: center;word-break:break-all;">
        <tr>
          <td colspan="2">XXX</td>
          <td colspan="2">⬜ XXX</td>
          <td colspan="2">⬛ XXX</td>
          <td colspan="2">⬜ XXX</td>
          <td colspan="2">⬜ XXX</td>
        </tr>
        <tr>
          <td colspan="3">XXX</td>
          <td colspan="3">XXX</td>
          <td colspan="2">XXX</td>
          <td colspan="2">2021-08-12</td>
        </tr>
        <tr>
          <td colspan="3">XXX</td>
          <td colspan="3">XXX、XXX</td>
          <td colspan="2">XXX</td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td colspan="10"
              style="height: 400px;text-align: left;vertical-align: top;padding: 10px 20px;text-indent:2em; ">
            fakjasdfkasfjasfkkafajsfafjlasjaskfjakskfjafafkdajfkjakjfkasjkasjkasjfkaafkljdskfajklas
            afsdaksdfjklasljflkasfjkasfasf;lasf'lasf;d'lfd;assdfkf'aksf;ladfklasdjfklasd;
            akjfalsf;jaksdjfaskl;jfasfj;asfsajlfjalsfkalfjasd;f
          </td>
        </tr>
        <tr>
          <td colspan="10"
              style="height: 300px;text-align: left;vertical-align: top;padding-top: 10px;text-indent:2em;">
            jdkfalkdfoieruqwiojkldfklaklflkalfkalsdfjkladfdaksfj;djasdfafaklsfjasfklasdfj;kasfjals;
          </td>
        </tr>
      </table>
    </div>
    <div style="margin-top: 10px;width: 650px;text-align: right;">
      <el-button type="primary" size="small" @click="printBillOriginal">原始打印</el-button>
      <el-button type="primary" size="small" v-print="print_bill_content">插件打印</el-button>
      <el-button type="primary" size="small" @click="printPdf">PDF下载</el-button>
    </div>
  </div>
</template>

<script>
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export default {
  name: "TablePrint",
  data() {
    return {
      print_bill_content: {
        id: "bill_content",
        popTitle: 'good print',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前');
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }
      }
    }
  },
  methods: {
    printBillOriginal() {
      let billOriginal = document.getElementById("bill_content").innerHTML
      let iHeight = 900;
      let iWidth = 900;
      let iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
      let iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
      let wind = window.open("", 'window', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
      wind.document.body.innerHTML = billOriginal;
      wind.print();
      wind.close();
      return false;
    },
    printPdf() {
      html2Canvas(document.querySelector('#bill_content'), { //导出的html元素
        allowTaint: true
      }).then(function (canvas) {
        debugger
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = contentWidth / 592.28 * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 595.28;
        let imgHeight = 592.28 / contentWidth * contentHeight;
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = new JsPDF('', 'pt', 'a4');
        if (leftHeight < pageHeight) {
          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('XXX信息反馈单' + '.pdf');
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px;

  a {
    text-decoration: none;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
  }
}
</style>

• 说明

需要安装的打印插件：

npm i vue-print-nb -s 

需要安装的pdf插件：
npm i html2canvas -s
npm i jspdf -s

结语

本节内容到这里就结束你了，希望能够帮助到你。。。