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

最新推荐文章于 2024-12-27 15:34:46 发布

超级无敌谢大脚

最新推荐文章于 2024-12-27 15:34:46 发布

阅读量398

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/Cang_Ye/article/details/140694827

版权

通过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>
            &l