【vue printJs】前端打印, 自定义字体大小, 自定义样式, 封装共享样式

效果示例

思维导图

目录

• • 1, 基本使用
  • • 1, 依赖下载
    • 2, 页面导入
    • 3, 修改字体大小(可行但不推荐)
  • 2, 自定义样式, 字体大小
  • • 1, 修改字体大小(推荐)
    • 2, 自定义样式
    • 3, 封装共享样式
  • 3, 去除页面页脚内容
  • 4, 测试案例 demo, 直接 cv 可用
  • 5, print-js 的其他参数说明

1, 基本使用

1, 依赖下载

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

2, 页面导入

div id="printMeasure">

/div>
el-button type="primary" @click="printClk">打 印/el-button>
...
import print from 'print-js'
...
printClk() {
  this.$nextTick(() => {
    print({
      printable: 'printMeasure', 
      type: 'html', 
      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

export default function () {
  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() {
      
      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
          }
        })
      })
      
      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: 0 10mm;
  }

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

点击前往

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