关于vue3 局部打印功能遇到的问题，到最后怎么实现的！！！

FirstTalent

已于 2024-02-28 16:35:44 修改

阅读量626

点赞数 10

文章标签： javascript vue.js 前端

于 2024-02-28 16:34:33 首次发布

本文链接：https://blog.csdn.net/scj0725/article/details/136348645

版权

最近一个业务，要实现局部打印功能，原本我用三个"el-row"标签写了两行内容一个数据表格。首先尝试了， window.print()，可想而知是失败的，直接打印了全部网页，获取局部的代码没有样式。依次尝试了其他插架比如说：print-js、vue3-print-nb都不适用，不是说插件不行，这些插件打印element写出来的页面样式，打印的时候多多少少都是有瑕疵的，要么表格显示不全，要么样式没有，我的解决方案是适用了原生的表格，代码如下。

改成原生表格

       <!-- 打印的内容 -->
      <div id="printContent" style="width: 100%" class="margin-top-15 report-font">
  <table cellspacing="0" border="1" style="width: 100%" class="margin-top-15 table-width-100">
          <tr>
            <td class="center bold" style="width: 5%" v-text="$t('report.number')"></td>
            <td class="center bold" style="width: 29%" v-text="$t('report.name')"></td>
            <td class="center bold" style="width: 18%" v-text="$t('report.lastYearFinalAccounts')"></td>
            <td class="center bold" style="width: 18%" v-text="$t('report.thisYearFinalAccountsDetail')"></td>
            <td class="center bold" style="width: 30%" v-text="$t('report.explain')"></td>
          </tr>
          <template v-if="tableData.length">
            <template v-for="(item, index) in tableData" :key="index">
              <tr class="table-width-100 report-row-height-20">
                <td class="center" style="width: 5%">{{ item.num }}</td>
                <td class="left" style="width: 29%" v-html="stringFormatter(item)"></td>
                <td class="left" style="width: 18%">
                  {{ amountFormatter(item.lastYearFinalAccounts) }}
                </td>
                <td class="left" style="width: 18%">{{amountFormatter(item.currentBudget)}}
                </td>
                <td class="left" style="width: 30%">{{ item.remark }}</td>
              </tr>
            </template>
          </template>
          <template v-else>
            <tr class="table-width-100 report-row-height-20">
              <td colspan="5" style="text-align: center;">
                暂无数据
              </td>
            </tr>
          </template>
        </table>
      </div>

这里有两种打印方案：首先最外层套了一个div设置了一个id为printContent的标签。

第一种：用iframe打印，页面也不会改变，也不用刷新，也不用重新打开页面。
首先在template中加入一个隐藏的iframe

  <!--打印用的隐藏的iframe-->
  <iframe width="0" height="0" frameborder="0" id="printIframe"></iframe>

然后就做打印的处理函数

// 处理打印按钮点击事件
const handlePrint = () => {
  //判断表格是否有数据
  if (tableData.value.length === 0) {
    $message.warning(t('general.noData'))
    return
  }
  //因为TypeScript 强制执行更严格的空值检查。所以一些地方加了?或者判断
  //获取打印内容
  const printHtml = document?.getElementById("printContent")?.innerHTML;
  //获取iframe 标签
  const syfPrint = document?.getElementById("printIframe") as HTMLIFrameElement | null;

  if (syfPrint) {
  //获取原页面里的head标签
    const documentHead = document.getElementsByTagName("head")[0];
      //获取iframe 页面里的head标签
    const iframeHead = syfPrint.contentDocument?.getElementsByTagName("head")[0];
	//把原页面的里的head标签内容给到iframe 页面里的head
    if (iframeHead) {
      iframeHead.innerHTML = documentHead.innerHTML;
    }
	//获取iframe 页面里的body，然后把dom结构赋值给iframe 
    const syfPrintBody = syfPrint.contentDocument?.body;
    if (syfPrintBody) {
      syfPrintBody.innerHTML = printHtml || "";
      //执行打印
      syfPrint.contentDocument.execCommand("Print");
    }
  } else {
  //错误提示
    $message.error(t('general.link.error'))
  }
}

这种方式直接在本页面打印，没毛病。
2. 第二中新打开了一个标签页，代码如下：

// 处理打印按钮点击事件
const handlePrint = () => {
  //判断表格是否有数据
  if (tableData.value.length === 0) {
    $message.warning(t('general.noData'))
    return
  }
  //获取本页面样式
    const styles = Array.from(document.styleSheets)
        .map(sheet => Array.from(sheet.cssRules)
            .map(rule => rule.cssText)
            .join('\n'))
        .join('\n');

    // 创建一个新的窗口，以打开打印预览
    const printWindow = window.open('', '_blank');
    printWindow?.document.open();

    // 将当前页面的样式信息添加到新窗口中
    printWindow?.document.write(`
      <html>
        <head>
          <style>
            ${styles}
          </style>
        </head>
        <body>
           ${document?.getElementById("printContent")?.innerHTML}
        </body>
      </html>
    `);

    printWindow?.document.close();
    printWindow?.print();
}

当然，你用原生代码写的，完全可以使用插件，我这里还以我安装的vue3-print-nb为例，直接可以不写打印事件，只要一个打印按钮就行，如下：

  <el-button type="primary" :icon="Printer" v-print="'#printContent'">打印</el-button>

v-print="‘#printContent’"直接指定要打印的标签ID就可以了，其他插架没有尝试，有兴趣可以试试。

FirstTalent

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于vue3 局部打印功能遇到的问题，到最后怎么实现的！！！

最近一个业务，要实现局部打印功能，原本我用三个"el-row"标签写了两行内容一个数据表格。现常识了， window.print()，可想而知是失败的，直接打印了全部网页，获取局部的代码没有样式。依次尝试了其他插架比如说：print-js、vue3-print-nb都不适用，不是说插件不行，这些插件打印element写出来的页面样式，打印的时候多多少少都是有瑕疵的，要么表格显示不全，要么样式没有，我的解决方案是适用了原生的表格，代码如下。
复制链接

扫一扫