前端开发打印当前网页的指定区域内容，或将网

网页打印插件示例项目。

# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 关于print.js

功能：网页打印插件，支持打印或不打印指定区域，同时支持将网页导出为pdf。

已实现：

待验证：

本插件可在 js 或 vue 项目中使用，其他框架未验证。两种使用场景引入的js大同小异。

可通过设置class 类名或 id 指定打印区域，但由于vue项目涉及到打包部署，推荐使用ref获取DOM节点，如果使用id或class获取，打包部署后打印内容可能显示空白。

<div class="printDom">指定打印区域</div> <div id="printDom">指定打印区域</div> <div ref="printDom">指定打印区域</div> 2、调用打印方法： 2.1 js 项目

// 引入 <script src="print.js"></script> // 调用 Print('#printDom',{}); 2.2 vue 项目

main.js引入，xx.vue页面引用

//main.js import Print from './print'; Vue.use(Print); // xx.vue this.$print(this.$refs.printDom, {}); 3、声明不打印区域：

js和vue项目通用

此时print方法中，不需要特意声明，默认会剔除.no-print区域

<div class="no-print">不打印区域</div> Print('#printDom'); 3.2 自定义类名

此时需要在print方法中通过"noPrint"属性指定不打印区域

<div class="no-print-box">自定义不打印区域类名</div> Print('#printDom',{noPrint:'.no-print-box'}); 4 参数说明

js和vue项目通用，以vue项目为例。

this.$print(this.$refs.printDom, { noPrint: '.noPrint', onStart: () => { console.log('打印开始'); }, onEnd: () => { onsole.log('打印完成'); } });

该项目，示范了普通js项目，和vue项目中通过调用print.js实现打印(或不打印)指定区域。

关于插件如何使用的详细解释，可参照该指南 guide.

同时，欢迎志同道合的小伙伴关注小编公棕号【前端便利贴】，前端加餐，头脑风暴，来了都是客，期待您的光临。