vue 实现打印功能

03-13 阅读 0评论

1. window.print()

浏览器原生 API window.print() 可以用于打印当前窗口(window.document)视图内容。调用此方法会产生一个打印预览弹框,用户可以根据具体设置来得到打印结果。

vue 实现打印功能,vue 实现打印功能,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,方法,第1张
(图片来源网络,侵删)

2. 使用插件vue-print-nb

调用 window.print() 会对整个 document.body 进行打印,而我们通常只需要打印一部分页面,可以使用打印插件vue-print-nb

vue-print-nb使用自定义指令 v-print来进行打印,点击就能触发

1.安装

npm install vue-print-nb --save

2.在main.js文件中注册使用

import Print from 'vue-print-nb'
Vue.use(Print);

3.具体使用方法:

(1)绑定id方法 (2)绑定对象方法

需要打印的内容
点击打印
需要打印的内容
点击打印 export default{ data(){ return { printObj:{ id:'printBox', // 必要,打元素的id popTitle: '打印', // 打印配置页上方标题 extraHead: '', //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔 preview: '', // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印) previewTitle: '', // 打印预览的标题(开启预览模式后出现), previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现) zIndex: '', // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面) previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用) previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用) beforeOpenCallback() {}, // 开启打印前的回调事件 openCallback() {}, // 调用打印之后的回调事件 closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消) url: '', standard: '', extraCss: '', } } } }

4. 屏蔽不需要打印的元素

在组件的打印区域里,给需要隐藏的内容的标签上添加

5.配置打印的样式

在全局样式中,新增标签,里面是打印时才生效的样式

@page {
  size: auto;
  margin: 3mm;
}
html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}

6.打印內容不自动换行问题

只需要给不自动换行的标签加上 word-wrap:break-word; 即可。

vue 实现打印功能,vue 实现打印功能,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,方法,第2张
(图片来源网络,侵删)
  .procedure{
      word-wrap:break-word;
   }

7.缺点

(1)无法打印本地图片,当需要打印的部分有本地图片时,打印之后图片不会显示。

(2)使用elementUI表格vxe-table表格打印时,会出现样式问题

8. 分页打印

不要使用定位,否则无法分页

	
打印
// 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页
这是第二页
这是第二页

3. 使用插件print.js

插件文档:https://printjs.crabbly.com/

1.安装

npm install print-js --save

2. 使用

在需要打印功能的组件中引用

 import print from 'print-js'
打印内容
点击打印
printClick() {
      const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
      printJS({
        printable: 'printBox',// 标签元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      });
      //各个配置项
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json时所需要的数据属性。
      //gridHeaderStyle和gridStyle都是打印json时可选的样式。
      //repeatTableHeader:在打印JSON数据时使用。设置为时false,数据表标题将仅在第一页显示。
      //scanStyles:设置为false时,库将不处理应用于正在打印的html的样式。使用css参数时很有用,此时自己设置的原来想要打印的样式就会失效,在打印预览时可以看到效果
      //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
      //style:传入自定义样式的字符串,使用在要打印的html页面 也就是纸上的样子。
      //ignoreElements:传入要打印的div中的子元素id,使其不打印。非常好用
    },
  }
vue 实现打印功能,vue 实现打印功能,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,方法,第3张
(图片来源网络,侵删)

免责声明
本网站所收集的部分公开资料来源于AI生成和互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,人围观)

还没有评论,来说两句吧...

目录[+]