vue2使用print-js，导出pdf，展示table内容超出页面可视范围的table内容

admin管理员组

文章数量:1649195

安装 print-js 

npm install print-js --save

在main.js添加

import Print from 'vue-print-nb'
Vue.use(Print);

给按钮添加

​
v-print="printObj"

再data里面声明就可以
​  printObj: {
        id: '需要导出的内容以及含有表格的内容',
        extraHead:
          '<meta http-equiv="Content-Language" content="zh-cn"/>,<style>#printArea {width:100%;}</style>', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        beforeEntryIframe(copy) {
          // copy是ele对象的深度拷贝，修改copy对象不会更改页面中table表格的样式，只会更改打印预览生成的表格的样式
          const cells = copy.querySelectorAll(".cell");
          const tableNode = copy.querySelectorAll(
            ".el-table__header,.el-table__body"
          );
          [].slice.call(cells).forEach((item) => {
            // 为了让表格中的内容自动换行，不需要的话可以删掉
            item.style.whiteSpace = "pre-wrap";
          });
          // el-table打印不全的问题
          [].slice.call(tableNode).forEach((item) => {
            item.style.width = "100%";
            const child = item.childNodes;
            [].slice.call(child).forEach((element) => {
              if (element.localName === "colgroup") {
                element.innerHTML = "";
              }
            });
          });
        },
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {}, // 开启打印前的回调事件
        openCallback() {
        }, // 调用打印之后的回调事件
        closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: "",
        standard: "",
        extraCss: "",
      },

注意导出pdf，如果表格内容过多，请使用原生table，elementui框架的el-table不支持表格换行

      <table>
              <thead>
                <tr>
                  <th v-for="(header, k) in page.headers" :key="k">
                       {{表头内容}}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr >
                  <td >
                    {{表格内容}}
                  </td>
                </tr>
              </tbody>
            </table>

再导出按钮上添加处理表格一行展示几列的数据

    importPDF() {
      this.preparePrintData(); // 预处理数据
    },
    preparePrintData() {
      const headersPerTable = [];
      const rowsPerTable = [];
    //this.columnsPerPage 设置一行展示几列， 根据个人业务需求
      // 假设 headerData 和 useTableData 已经准备好，并且它们的结构是对应的
      for (let i = 0; i < this.headerData.length; i += this.columnsPerPage) {
        const tableHeaders = this.headerData.slice(i, i + this.columnsPerPage);
        const tableRows = this.useTableData.map((row) => {
          return row.rowList
            .slice(i, i + this.columnsPerPage)
            .map((cell) => ({ ...cell })); // 复制单元格数据
        });
        headersPerTable.push(tableHeaders);
        rowsPerTable.push(tableRows);
      }

      // 这里需要稍微转换一下数据结构，以适应模板的渲染
      this.printTables = headersPerTable.map((headers, index) => ({
        headers,
        rowList: rowsPerTable[index],
      }));
    },

 附带设置表格的样式，注意不要添加scoped，否则不生效

<style lang="scss" media='print'>
@page {
  size: auto;
  margin: 3mm;
}
@media print {
  /* 设置打印时的表格样式 */
  table {
    table-layout: fixed;
    width: 100%;
  }
  td,
  th {
    word-wrap: break-word; /* 长单词或URL断行 */
    word-break: break-all; /* 非中文长单词断行 */
    border: 1px solid #ccc;
    text-align: center;
    // page-break-inside: avoid;
  }
  tr {
    width: 180px;
    height: 80px;
    word-wrap: break-word; /* 长单词或URL断行 */
    word-break: break-all; /* 非中文长单词断行 */
    border: 1px solid #ccc;
    text-align: center;
    // page-break-inside: avoid;
    // page-break-after: avoid;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  /* 其他打印样式 */
}
</style>

导出的表格数据，如果行多一页展示不下的时候，下一页会继续出现表头直到把行展示完，才会展示剩余列的数据 

本文标签： 内容可视页面Printjs