vue3中使用表格打印功能

最新推荐文章于 2025-10-29 13:43:13 发布

原创最新推荐文章于 2025-10-29 13:43:13 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

博客介绍了在前端实现打印功能的方法。先下载第三方插件print-js，接着在表格页面导入该插件，最后在点击打印按钮或触发打印时调用相应方法。

1、首先先现在一个第三方插件print-js

npm i print-js

2、在表格页面导入print-js

import printJS from 'print-js';

3、在点击打印按钮或者触发打印的时候调用方法


printOk该方法是自定义的，用来触发打印
const printOk = () => {
  printJS({
    scanStyles: false,//是否需要使用
    printable: print.value,//获取页面表格的dom元素
    documentTitle: '测试'， //打印头部提示内容
    style: printFromClass,//自定义表格样式
    type: 'html', //打印类型html，还可以是json，image等
    // targetStyles: ['*'], //css样式，写成*代表打印样式完全继承你页面的样式
  });
};

更多的参数信息详细写法见官网

点击这里查看非官网