【Vue】Vue 使用 Print.js 打印div（选中区域的html）

蓝胖子的多啦A梦

已于 2023-02-23 17:11:24 修改

阅读量1.6k

点赞数

分类专栏： vue js 方法文章标签： javascript vue.js html

于 2023-02-23 17:08:53 首次发布

本文链接：https://blog.csdn.net/Maxueyingying/article/details/129183076

版权

vue 同时被 3 个专栏收录

98 篇文章 4 订阅

订阅专栏

方法

72 篇文章 1 订阅

订阅专栏

67 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Print.js插件进行网页元素的打印，包括下载安装插件、导入到项目、配置打印区域及类型，以及处理打印时的页眉和页脚问题。在Chrome和IE中，提供了去除默认页眉和页脚的方法。

摘要由CSDN通过智能技术生成

一、下载 Print.js 插件

  npm install print-js --save

二、导入 Print.js 插件

  import print from 'print-js'

三、在页面上使用

<div id="printJS-form">
    需要打印的区域
 </div>

 <button type="button" @click="printJS('printJS-form', 'html')">
    打印按钮
 </button>

methods: {
     //打印
     printDetail(){
       printJS({
         printable:'printJS-form', //打印区域
         type:'html',  //打印类型html，还可以是json，image等，详细写法见官网
         targetStyles: ['*'],  //css样式，写成*代表打印样式完全继承你页面的样式
         maxWidth:'800px'  //打印界面最大宽度，适当调整可以解决打印页面过宽，显示不完整的问题
       })
     },
}