通过iframe碎片实现web局部打印

超级无敌谢大脚

于 2024-07-25 17:09:18 发布

阅读量283

点赞数 2

分类专栏： vue 个人笔记小知识点文章标签：前端

本文链接：https://blog.csdn.net/cang_ye/article/details/140694827

版权

个人笔记同时被 3 个专栏收录

64 篇文章 1 订阅

订阅专栏

小知识点

39 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

通过iframe碎片实现web局部打印

创建打印模板

首先，创建一个出货单的 HTML 模板，并用 CSS 进行样式设计。
tips:
1、直接通过iframe碎片拉起打印，会导致样式丢失，所以需要获取当前界面的样式。

${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(style => style.outerHTML).join('\n');}

2、通过浏览器拉起打印机打印会有一个延迟，如果直接执行 document.body.removeChild(iframe); 移除 iframe 碎片会导致打印机获取不到碎片的内容。所以需要对 removeChild() 进行延迟处理。

<template>
  <div id="app">
    <button @click="printOrder">打印出货单</button>
    <div id="printArea">
      <h1>出货单</h1>
      <p>订单编号: {{ orderNumber }}</p>
      <p>客户名称: {{ customerName }}</p>
      <table>
        <thead>
          <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in orderItems" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.total }}</td>
          </tr>
        </tbody>
      </table>
      <p>总计: {{ totalAmount }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderNumber: '12345',
      customerName: '张三',
      orderItems: [
        { id: 1, name: '商品1', quantity: 2, price: 100, total: 200 },
        { id: 2, name: '商品2', quantity: 1, price: 200, total: 200 },
      ],
      totalAmount: 400,
    };
  },
  methods: {
    printOrder() {
      const printContent = this.$refs.printArea.innerHTML;
      const iframe = document.createElement('iframe');
      iframe.style.position = 'absolute';
      iframe.style.width = '0px';
      iframe.style.height = '0px';
      iframe.style.border = 'none';
      document.body.appendChild(iframe);

      const iframeDoc = iframe.contentWindow.document;
      iframeDoc.open();
      iframeDoc.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>出货单</title>
            ${Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(style => style.outerHTML).join('\n');}
            <style>
              table {
                width: 100%;
                border-collapse: collapse;
              }
              th, td {
                border: 1px solid #000;
                padding: 8px;
                text-align: left;
              }
            </style>
          </head>
          <body>
            ${printContent}
          </body>
        </html>
      `);
      iframeDoc.close();

      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      setTimeout(()=>{
             document.body.removeChild(iframe);
      },3000);
    },
  },
};
</script>

<style>
#printArea {
  width: 100%;
  padding: 20px;
  border: 1px solid #000;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
</style>