使用 Print-js 实现打印、预览功能前端部分

一、传送门：官方文档、大神文档

二、使用方式

安装：

npm install print-js --save

引入：

import print from 'print-js'

直接使用：

// base64格式
let base64Data = res.data
print({ printable: base64Data, type: 'pdf', base64: true })

三、封装

打印预览组件封装：

<template><div style="height:auto;"><el-button @click="printHtml" v-show="isPrint">打印</el-button><iframe:class="{ 'iframe_scale': isScale }":id="'show-iframe'+id"frameborder="0"scrolling="yes"style="background-color:transparent; position：absolute;width: 100%;height:100%; top: 0;left:0;bottom:0;"/></div>
</template><script>
import print from 'print-js'
import request from '@/utils/request'
import to from '@/to'
import * as API_Print from '@/api/print'
export default {name: 'Index',props: {id: {type: String,default: () => ''},// 通过链接打印htmlUrl: {type: String,default: () => ''},// 通过文本打印htmlText: {type: String,default: () => null},// 是否显示打印按钮isPrint: {type: Boolean,default: () => true},// 是否缩印isScale: {type: Boolean,default: () => false},// 打印方向direction: {type: String,default: () => ''},},data: () => {return {}},watch: {htmlText: {handler: function(newVal, oldVal) {if (newVal) {this.init()}}},htmlUrl: {handler: function(newVal, oldVal) {if (newVal) {this.init()}}}},mounted() {/*** iframe-宽高自适应显示*/this.init()},methods: {async init() {const oIframe = document.getElementById('show-iframe' + this.id)const deviceHeight = document.documentElement.clientHeightif(this.isScale) {// 考评情况表打印 缩放oIframe.style.height = (Number(deviceHeight) + 60) + 'px'const deviceWidth = document.documentElement.clientWidthoIframe.style.width = (Number(deviceWidth) / 2.65) + 'px'} else {oIframe.style.height = (Number(deviceHeight) + 100) + 'px' // 数字是页面布局高度差，其中的100可以根据自己的界面进行调整}const iframedoc = oIframe.contentDocument || oIframe.contentWindow.documentif (this.htmlText) {iframedoc.children[0].innerHTML = this.htmlText} else {const [err, res] = await to(request({url: this.htmlUrl,method: 'get'}))if (err) {throw new Error(err)}if (res) {iframedoc.children[0].innerHTML = res}}},// 打印按钮async printHtml() {const oIframe = document.getElementById('show-iframe' + this.id)const iframedoc = oIframe.contentDocument || oIframe.contentWindow.documentconst htmlText = iframedoc.children[0].outerHTMLif (this.direction == '1') {// 横向打印var obj = [{"fileName": "","generateHtml": htmlText,"pageMargin": {"bottom": 0,"isHorizontal": 1,"left": 0,"right": 0,"top": 0}}]const [err, res] = await to(API_Print.transMultiHtml2Pdf(obj))if (err) {throw new Error(err)}const base64Data = res.dataprint({ printable: base64Data, type: 'pdf', base64: true })} else {const [err, res] = await to(API_Print.transHtml2Pdf({ htmlText }))if (err) {throw new Error(err)}const base64Data = res.dataprint({ printable: base64Data, type: 'pdf', base64: true })}}}
}
</script><style scoped>.iframe_scale {-ms-zoom: 0.4;-moz-transform: scale(0.4);-moz-transform-origin: 0 0;-o-transform: scale(0.4);-o-transform-origin: 0 0;-webkit-transform: scale(0.4);-webkit-transform-origin: 0 0;}
</style>

组件使用：

<template><span @click="previewText">预览</span><span @click="printText">通过文本打印</span><span @click="batchPrintText">批量打印</span><PrintHtmlPanel :html-text="html" ref="textHtml" v-if="textHtml !==''"/><span @click="previewUrl">预览</span><PrintHtmlPanel :html-url="htmlUrl" ref="urlHtml" v-if="htmlUrl !== ''"/>
</template><script>
import PrintHtmlPanel from '@/components/PrintHtmlPanel'
export default {components: {PrintHtmlPanel},data() {return {html: '',htmlUrl: ''}},methods: {// 预览previewUrl() {this.htmlUrl = res.htmlUrl}// 预览previewText() {this.html = res.html;},// 打印printText() {let base64Data = res.dataprint({ printable: base64Data, type: 'pdf', base64: true })}// 批量打印batchPrintText() {let htmlText = ''let htmlArray = []res.data.forEach(ele => {htmlArray.push(ele.generateHtml)});htmlText = htmlArray.join('<p style="page-break-after:always;"></p>') // 换页// html转换pdfBase64const [err1, res1] = await to(API_Print.transHtml2Pdf({ htmlText }))if (err1) {throw new Error(err1)}let base64Data = res1.dataprint({ printable: base64Data, type: 'pdf', base64: true })}
}
</script>

使用 Print-js 实现打印、预览功能前端部分相关推荐

网页中JS实现（调用）打印预览功能
近期的项目中需要在页面中实现打印预览功能--点击网页中的"打印"(Print),弹出打印预览窗口,点击窗口页面中的"开始打印"(Print),则出现浏览器的打印 ...
php怎么实现打印预览,JavaScript_js实现局部页面打印预览原理及示例代码，最近有朋友问js 如何打印预览 - phpStudy...
js实现局部页面打印预览原理及示例代码最近有朋友问js 如何打印预览,今天就来讲解一下,首先了解一下打印原理,其实局部打印页面很简单.就是把你需要打印的部分做一个起始标记,至于标记如何写,随便你写什 ...
C#实现打印与打印预览功能
C#实现打印与打印预览功能发表日期:2010年12月31日作者:whitewin 点击:102次在windows应用程序中文档的打印是一项非常重要的功能,在以前一直是一个非常复杂的工作,Micr ...
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）
在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印,那么如何才能够在打印预览页面中显示图片呢?希望看完这篇文章对您有所帮助! 1. 原生JS调用打印预览页面 2. 在打印预览页面加载图片使用 ...
敲的php代码怎么预览,php如何实现打印预览功能
php实现打印预览功能的方法:首先获取当前页的html代码:然后设置打印开始区域和打印结束区域:接着从开始和结束代码向后取html:最好确定要打印的内容即可. 推荐:<PHP视频教程> p ...
DELPHI 打印预览功能
在很多应用程序中,都需要程序具有打印预览功能,以避免用户由于选择不当出现打印错误. 预览实现方式为通过创建一个Tpanel的派生类并公开它的canvas属性比例尺或视区范围,使用较为不方便,笔者通过实 ...
MFC 基于多文档的打印和打印预览功能的实现
一.基础知识 1 网上有很多的关于打印的程序,一定要看清楚,是基于对话框dialog的打印功能,还是基于文档的打印功能. 如果分不清基于对话框和文档的区别,建议新建一个单文档.多文档和对话框的工程,看 ...
html页面实现打印预览功能,js实现打印、页面设置、打印预览功能
javascript打印-打印页面设置-打印预览代码 function printsetup(){ // 打印页面设置 wb.execwb(8,1); } function printpreview( ...
react项目中实现打印预览功能
最近项目中,前端采用react+antd+dva的组合, 今天有一个新需求, 需要在后台管理系统中实现点击打印完成指定页面的打印功能. 我们道浏览器带有打印功能的实现,window.print() ...
window.print()进入到打印预览界面后无法进行布局和纸张选择等设置的原因及解决方法
做一个网页打印的功能,打印出网页某一部分的内容,使用的window.print()区打印,打印的过程中发现打印预览时没办法进行布局和纸张等的设置.如下图,图一为正常情况可设置相关配置,图二为我遇到的情 ...

使用 Print-js 实现打印、预览功能前端部分

使用 Print-js 实现打印、预览功能前端部分相关推荐

最新文章

热门文章

使用 Print-js 实现打印、预览功能 前端部分

使用 Print-js 实现打印、预览功能 前端部分相关推荐

最新文章

热门文章

使用 Print-js 实现打印、预览功能前端部分

使用 Print-js 实现打印、预览功能前端部分相关推荐