vue实现本地打印功能+获取页面做模板内容

原创已于 2025-11-22 08:37:17 修改 · 974 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2025-09-19 15:56:01 首次发布

码工人勤勤恳恳的搬砖中，接到了一个打印的功能需求。具体需求是把前端某个页面或者页面的一部分打印出来。嘿，打印之前倒是也做过，都是后端生成模板然后调用驱动或者打印机厂商提供的打印服务实现的，但是听说前端也可以实现生成模板打印，而且用前端打印比较合适。于是就翻阅资料用vue2实现了这个打印功能。

先给你们展示一下效果图吧，这是调用本地打印，自己可以选择打印驱动调用打印机打印。

好了，废话少说。效果图也看了，符合你要找的打印的话，请看详细流程。

1.首先，项目需要装一个print-js依赖插件，通过这个插件前端调用打印。运行命令npm install --save print-js

npm install --save print-js

2.在需要打印的页面引用这个插件

import print from 'print-js'

3.你需要打印的部分给他的控件设置一个id，我这里是把需要打印的部分用div括住了，给这个div设置了一个id

<div id="templateDesignDiv">
     ******具体的内容*******
</div>

4.写一个打印按钮用来触发这个打印

<el-button v-if="!checkedStatus" type="primary" @click="toPrint">打印</el-button>

5.触发的函数执行打印

toPrint() {
      // templateDesignDiv
      print({
        // printable: 'templateDesignDiv',	//打印区域id
        printable: 'templateDesignDiv',	//打印区域id
        type: 'html',		//打印类型是html
        scanStyles: false,
        targetStyles: ['*'],
        style: `
                    table {
      border-collapse: collapse;
      width: 1000px;
      font-size: 12px;
      table-layout: fixed; /* 固定表格布局，确保列宽一致 */
    }
    th, td {
      border: 1px solid #000;
      padding: 2px;
      text-align: center;
      line-height: 1.8;
      word-wrap: break-word; /* 防止内容溢出 */
      white-space: normal; /* 确保内容正常换行 */
    }
                  `
      })
    },

OK，这样就实现了打印功能。下面讲解一下每个参数干嘛的。

print-js 是一个轻量级的 JavaScript 打印库，可以让你在前端通过简单的 API 调用打印指定区域的 HTML 内容或文件。

printable: 'templateDesignDiv'：
- printable 属性指定了要打印的 HTML 区域的 ID（在这个例子中是 templateDesignDiv）。该区域的内容将被提取并发送给打印机。
type: 'html'：
- type 属性指定打印类型为 html，即打印 HTML 内容。这个选项允许打印页面的内容（比如一个 div 内的 HTML 元素）。
scanStyles: false：
- scanStyles 属性决定是否扫描页面的 CSS 样式。如果设置为 false，print-js 将不会自动应用页面上的样式（避免打印时样式被污染）。如果你希望打印时带有页面的样式，可以设置为 true。
targetStyles: ['*']：
- targetStyles 属性指定哪些 CSS 样式需要应用到打印的内容上。在这里，'*' 表示所有的样式都会被应用到打印的区域。这可以确保打印内容的格式尽可能接近页面展示的样式。
style：
- style 属性允许你自定义打印时应用的 CSS 样式。在这个例子中，样式主要针对 table 和 th, td 元素，设置了表格布局、边框、字体大小、表格的固定布局等，确保表格的打印效果良好。你还特别设置了防止文字溢出和自动换行等样式。
  
  总结：
  
  这个方法通过 print-js 插件来实现打印指定区域（templateDesignDiv）的 HTML 内容，并为打印内容应用自定义的样式。打印区域内的表格在打印时会有更好的格式控制，确保内容不会溢出且保持整齐。
  
  这个实现非常适合打印需要格式化的表格内容。通过自定义样式，你可以确保打印出来的内容与页面上的显示效果一致。如果你在页面上修改了样式或需要改变打印内容的布局，只需要调整 style 部分的 CSS 规则。