效果示例

思维导图

1,基本使用

1, 依赖下载

npm i print-js --save /^1.6.0/

2, 页面导入

<div id="printMeasure">// id包裹需要打印的内容</div><el-button type="primary" @click="printClk">打 印</el-button>...//无关内容已省略import print from'print-js'...//无关内容已省略printClk(){this.$nextTick(()=>{print({ printable:'printMeasure',// 打印的内容id,跟上面对应 type:'html',// 打印的类型, 详细的可以在官方文档https://printjs.crabbly.com/中查询 targetStyles:'*',// 继承样式, 不能自定义修改})})},

以上步骤可以实现基本的页面打印, 但不能修改字体大小, 请看下一步

3, 修改字体大小(可行但不推荐)

node_modules/print-js/dist/print.js 206 行 <!-- 注释 --> elementStyle +='max-width: '+ params.maxWidth +'px !important; font-size: '+ params.font_size +' !important;';<!-- 替换 --> elementStyle +='max-width: '+ params.maxWidth +'px !important;';

虽然很多人都是用这种方法, 但这修改了源码, 多人协作开发就很麻烦, 很鸡肋, 请看下一步

2, 自定义样式,字体大小

1, 修改字体大小(推荐)

<div class='title'>标题标题标题标题标题标题</div>...//无关内容已省略printClk(){this.$nextTick(()=>{print({ printable:'printMeasure', type:'html', style:'.title{font-size:30px}', scanStyles:false,// 开启自定义样式})})},

如图,可以看出标题明显变大了, 但下面内容的样式生效了, 因为使用了scanStyles: false, // 开启自定义样式, 这是后就需要我们自定义样式了, 请看下一步

2, 自定义样式

如果修改样式很多呢, 在style里面写机会太长了, 用是可以用, 可读性很不好, 直接封装一下导入进来不就可以了
新建printCss.js

exportdefaultfunction(){return` /*这样注释可以*/ //这样注释样式会失效 .title{font-size:30px} .xxx{height:200px} ... `}

打印页

...import print from'print-js'import printCss from'@/util/printCss'...printClk(){this.$nextTick(()=>{print({ printable:'printMeasure', type:'html', style:printCss(), scanStyles:false,})})},

比如打印预览某部分高度是100px, 但是在系统打印那边需要设置高一点以便撑满整个a4纸, 这样就可以单独对其进行设置了
问: 为什么不在打印预览就设置好高度呢
答: 因为a4纸(210mm*297mm)高度转换成px是1000多, 模态框会出现滚动条,不美观
推荐一个px转mm的工具: 点击前往, 可以对照转换进行修改, 使内容充满整个a4纸了
这样就可以对系统打印页进行样式单独修改了, 这里修改的只会修复对系统打印的css哦, 并不会修改打印预览的css

如图, 可以看出打印预览部分和系统打印页中90%的样式都是相同的, 总不可能在打印页再写一遍一样的样式吧, 那太累赘了, 那能不能既要对打印页自定义样式,又要获取打印预览页的样式呢, 能!, 请看下一步

3, 封装共享样式

直接在打印js里面获取打印预览的模态框里面的样式

printClk(){// 解析所有css文件中含有.measureSty的样式的文件const styleSheets = document.styleSheets let cssStr ='' Array.from(styleSheets).forEach((sheet)=>{const rules = sheet.cssRules || sheet.rules Array.from(rules).forEach((rule)=>{if(rule.cssText && rule.cssText.startsWith('.measureSty')){ cssStr += rule.cssText }})})// printCss打印区域样式 cssStr +=printCss()this.$nextTick(()=>{print({ printable:'printMeasure', type:'html', style: cssStr, scanStyles:false,})})},

document.styleSheets 获取页面中所以的样式内容,
rule.cssText.startsWith(‘.measureSty’) 因为我把打印模态框样式全写在.measureSty里面了 ,这样就很好区分是不是打印模态框的样式了, 然后进行一系列的过滤操作, 最后加上对系统打印单独设置的css
这样就不用重复写样式了
如果对系统打印页的样式有不生效的, 加个!important就可以了

3, 去除页面页脚内容

加一行这个样式就可以了

@page { margin:010mm;}

4, 测试案例demo, 直接cv可用

点击前往

5, print-js的其他参数说明