【vue+printJs】前端打印, 自界说字体大小, 自界说样式, 封装共享样式 ...

结果示例

头脑导图

  
1,根本使用

1, 依靠下载

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

复制代码

2, 页面导入

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

复制代码

以上步调可以实现根本的页面打印, 但不能修改字体大小, 请看下一步
3, 修改字体大小(可行但不保举)

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

复制代码

固然很多人都是用这种方法, 但这修改了源码, 多人协作开发就很麻烦, 很鸡肋, 请看下一步
2, 自界说样式,字体大小

1, 修改字体大小(保举)

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

复制代码

如图,可以看出标题显着变大了, 但下面内容的样式见效了, 由于使用了scanStyles: false, // 开启自界说样式, 这是后就需要我们自界说样式了, 请看下一步
2, 自界说样式

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

1. export default function () {
2.   return `
3.           /*这样注释可以*/
4.           //这样注释样式会失效
5.           .title{font-size:30px}
6.           .xxx{height:200px}
7.           ...
8.   `
9. }

复制代码

打印页

1. ...
2. import print from 'print-js'
3. import printCss from '@/util/printCss'
4. ...
5. printClk() {
6.       this.$nextTick(() => {
7.         print({
8.           printable: 'printMeasure',
9.           type: 'html',
10.           style: printCss(),
11.           scanStyles: false,
12.         })
13.       })
14.     },

复制代码

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

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

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

1.     printClk() {
2.       // 解析所有css文件中含有.measureSty的样式的文件
3.       const styleSheets = document.styleSheets
4.       let cssStr = ''
5.       Array.from(styleSheets).forEach((sheet) => {
6.         const rules = sheet.cssRules || sheet.rules
7.         Array.from(rules).forEach((rule) => {
8.           if (rule.cssText && rule.cssText.startsWith('.measureSty')) {
9.             cssStr += rule.cssText
10.           }
11.         })
12.       })
13.       // printCss打印区域样式
14.       cssStr += printCss()
15.       this.$nextTick(() => {
16.         print({
17.           printable: 'printMeasure',
18.           type: 'html',
19.           style: cssStr,
20.           scanStyles: false,
21.         })
22.       })
23.     },

复制代码

document.styleSheets 获取页面中所以的样式内容,
rule.cssText.startsWith(‘.measureSty’) 由于我把打印模态框样式全写在.measureSty里面了 ,这样就很好区分是不是打印模态框的样式了, 然后举行一系列的过滤利用, 末了加上对系统打印单独设置的css
这样就不用重复写样式了
假如对系统打印页的样式有不见效的, 加个!important就可以了
3, 去除页面页脚内容

加一行这个样式就可以了

1.   @page {
2.     margin: 0 10mm;
3.   }

复制代码

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

点击前往
5, print-js的其他参数说明

   参数默认值说明printablenull文档源：pdf或图像url、html元素id或json数据对象。type‘pdf’可打印类型。可用的打印选项有：pdf、html、image、json和raw html。headernull用于HTML、图像或JSON打印的可选标题。它将被放置在页面顶部。此属性将担当文本或原始HTML。headerStyle‘font-weight: 300;’要应用于标题文本的可选标题样式。maxWidth800以像素为单元的最大文档宽度。根据需要更改此选项。打印HTML、图像或JSON时使用。cssnull这答应我们通报一个或多个css文件URL，这些URL应该应用于正在打印的html。值可以是具有单个URL的字符串，也可以是具有多个URL的数组。stylenull这答应我们通报一个带有自界说样式的字符串，该字符串应应用于正在打印的html。scanStylestrue设置为false时，库将不会处置处罚应用于正在打印的html的样式。使用css参数时很有效。targetStylenull默认环境下，在打印HTML元素时，库仅处置处罚某些样式。此选项答应您通报要处置处罚的样式数组。比方：[‘pading-top’，‘border-bottom’]targetStylesnull不过，与“targetStyle”雷同，它将处置处罚任意范围的样式。比方：[‘border’，‘padding’]，将包罗“border-bottom”、“bordertop”、“border-left”、“porder-refght”、“padding-top”等。您还可以通报[‘*’]来处置处罚所有样式。ignoreElements[ ]担当打印父html元素时应忽略的html ID数组。propertiesnull打印JSON时使用。这些是对象属性名称。gridHeaderStyle‘font-weight: bold;’打印JSON数据时网格头的可选样式。gridStyle‘border: 1px solid lightgray; margin-bottom: -1px;’打印JSON数据时网格行的可选样式。repeatTableHeadertrue打印JSON数据时使用。设置为false时，数据表标题将仅表现在第一页。showModalnull启用此选项可在检索或处置处罚大型PDF文件时表现用户反馈。modalMessage‘Retrieving Document…’showModal设置为true时向用户表现的消息。onLoadingStartnull加载PDF时要执行的函数onLoadingEndnull加载PDF后要执行的函数documentTitle‘Document’打印html、image或json时，这将表现为文档标题。fallbackPrintablenull打印pdf时，假如浏览器不兼容（查抄浏览器兼容性表），库将在新选项卡中打开pdf。这答应您通报要打开的差异pdf文档，而不是通报给“可打印”的原始文档。假如在备用pdf文件中注入javascript，这可能会很有效。onPdfOpennull打印pdf时，假如浏览器不兼容（查抄浏览器兼容性表），库将在新选项卡中打开pdf。可以在此处通报回调函数，当发生这种环境时将执行回调函数。在某些需要处置处罚打印流、更新用户界面等的环境下，它可能很有效。onPrintDialogClosenull浏览器打印对话框关闭后执行的回调函数。onErrorerror => throw error发生错误时要执行的回调函数。base64false打印作为base64数据通报的PDF文档时使用。honorMarginPadding(弃用)true这用于保留或删除正在打印的元素的填充和边距。偶然这些样式设置在屏幕上很好，但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。honorColor(弃用)false要彩色打印文本，请将此属性设置为true。默认环境下，所有文本将以玄色打印。font(弃用)‘TimesNewRoman’打印HTML或JSON时使用的字体。font_size(弃用)‘12pt’打印HTML或JSON时使用的字体大小。imageStyle(弃用)‘width:100%;’打印图像时使用。担当包罗要应用于每个图像的自界说样式的字符串。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。