vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）
时间：2024-04-29 16:40:37 来源：网络cs 作者：淼淼 栏目：卖家故事 阅读：
阅读本书更多章节>>>>
阅读本书更多章节>>>>
vue+element-ui前端使用print-js实现打印
下载依赖使用print-js实现打印功能需要打印的内容按钮调用打印函数打印函数设置默认打印横纵向（IE不生效）设置默认打印缩放比调整打印字体大小自定义字体大小生效自定义背景颜色生效参数
print-js官网链接: https://printjs.crabbly.com/
下载依赖
npm install print-js --save在package.json文件中增加print-js依赖。
"dependencies": { "axios": "^0.19.2", "babel-polyfill": "^6.26.0", "element-ui": "^2.15.6", "file-saver": "^2.0.5", "pinyin-match": "^1.2.2", "print-js": "^1.6.0", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.1.2", "xlsx": "^0.17.0", "xlsx-style": "^0.8.13" },
使用print-js
在需要打印的页面对应文件中引入print-js
import printJS from 'print-js'实现打印功能
需要打印的内容
需要把表格打印出来，在表格外套一个div，并给一个id值。
<div class="data-card" id="mytable1"> <el-table size="mini" :key="num" id="mytable" :header-cell-style="tableHeaderColor" :span-method="arraySpanMethod" :cell-style="cellStyle" ref="table" :data="tableDataDetail" border stripe style="width: 100%"> <el-table-column align="center" :label="title"> </el-table-column> </el-table> </div>按钮调用打印函数
定义一个按钮，点击调用打印函数。
<el-button @click="handleDownload()">下载</el-button>打印函数
不同浏览器打印样式不同，使用navigator.userAgent进行了判断。
printJS是引用的print-js对象
printtable为标签元素id
type有html，json，pdf等。
header是用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。
style为自定义的样式
handlePrint () { let userAgent = navigator.userAgent; //判断是否Firefox浏览器 if (userAgent.indexOf("Firefox") > -1) { console.log('Firefox') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } //判断是否chorme浏览器 if (userAgent.indexOf("Chrome") > -1){ console.log('Chrome') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', documentTitle: '', style: `@page {size:auto;margin-top:100px; margin-left:5px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } //判断是否IE浏览器 if (!!window.ActiveXObject || "ActiveXObject" in window) { console.log('IE') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } },设置默认打印横纵向（IE不生效）
打印横向：@media print{@page {size:landscape}}
打印纵向：@media print{@page {size:portrait}}
加在style里
设置默认打印缩放比
在style中加入body {zoom: 50%;}
zoom中写需要的缩放比。
调整打印字体大小
修改print-js文件
修改font_size数值（小于一定数值之后chrome浏览器内打印字体不会变小）
自定义字体大小生效
修改print-js文件
修改font-size生效在206行
将有font-size的匿掉，改成下面一行。
// elementStyle += 'max-width: ' + params.maxWidth + 'px !important; font-size: ' + params.font_size + ' !important;'; elementStyle += 'max-width: ' + params.maxWidth + 'px !important;';自定义背景颜色生效
Chrome & IE中加入这句话： -webkit-print-color-adjust: exact
.back1 { -webkit-print-color-adjust: exact; background-color:rgba(250,240,230,1) !important; }火狐例子：
.back1 { background-color: unset; box-shadow: inset 0 0 0 1000px rgba(250,240,230,1) }效果：
参数
| 参数 | 默认值 | 说明 |
|---|---|---|
| printable | null | 文档源：pdf或图像url、html元素id或json数据对象。 |
| type | ‘pdf’ | 可打印类型。可用的打印选项有：pdf、html、image、json和raw html。 |
| header | null | 用于HTML、图像或JSON打印的可选标题。它将被放置在页面顶部。此属性将接受文本或原始HTML。 |
| headerStyle | ‘font-weight: 300;’ | 要应用于标题文本的可选标题样式。 |
| maxWidth | 800 | 以像素为单位的最大文档宽度。根据需要更改此选项。打印HTML、图像或JSON时使用。 |
| css | null | 这允许我们传递一个或多个css文件URL，这些URL应该应用于正在打印的html。值可以是具有单个URL的字符串，也可以是具有多个URL的数组。 |
| style | null | 这允许我们传递一个带有自定义样式的字符串，该字符串应应用于正在打印的html。 |
| scanStyles | true | 设置为false时，库将不会处理应用于正在打印的html的样式。使用css参数时很有用。 |
| targetStyle | null | 默认情况下，在打印HTML元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。例如：[‘pading-top’，‘border-bottom’] |
| targetStyles | null | 不过，与“targetStyle”相同，它将处理任意范围的样式。例如：[‘border’，‘padding’]，将包括“border-bottom”、“bordertop”、“border-left”、“porder-refght”、“padding-top”等。您还可以传递[‘*’]来处理所有样式。 |
| ignoreElements | [ ] | 接受打印父html元素时应忽略的html ID数组。 |
| properties | null | 打印JSON时使用。这些是对象属性名称。 |
| gridHeaderStyle | ‘font-weight: bold;’ | 打印JSON数据时网格头的可选样式。 |
| gridStyle | ‘border: 1px solid lightgray; margin-bottom: -1px;’ | 打印JSON数据时网格行的可选样式。 |
| repeatTableHeader | true | 打印JSON数据时使用。设置为false时，数据表标题将仅显示在第一页。 |
| showModal | null | 启用此选项可在检索或处理大型PDF文件时显示用户反馈。 |
| modalMessage | ‘Retrieving Document…’ | showModal设置为true时向用户显示的消息。 |
| onLoadingStart | null | 加载PDF时要执行的函数 |
| onLoadingEnd | null | 加载PDF后要执行的函数 |
| documentTitle | ‘Document’ | 打印html、image或json时，这将显示为文档标题。 |
| fallbackPrintable | null | 打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档，而不是传递给“可打印”的原始文档。如果在备用pdf文件中注入javascript，这可能会很有用。 |
| onPdfOpen | null | 打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。可以在此处传递回调函数，当发生这种情况时将执行回调函数。在某些需要处理打印流、更新用户界面等的情况下，它可能很有用。 |
| onPrintDialogClose | null | 浏览器打印对话框关闭后执行的回调函数。 |
| onError | error => throw error | 发生错误时要执行的回调函数。 |
| base64 | false | 打印作为base64数据传递的PDF文档时使用。 |
| honorMarginPadding(弃用) | true | 这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很好，但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。 |
| honorColor(弃用) | false | 要彩色打印文本，请将此属性设置为true。默认情况下，所有文本将以黑色打印。 |
| font(弃用) | ‘TimesNewRoman’ | 打印HTML或JSON时使用的字体。 |
| font_size(弃用) | ‘12pt’ | 打印HTML或JSON时使用的字体大小。 |
| imageStyle(弃用) | ‘width:100%;’ | 打印图像时使用。接受包含要应用于每个图像的自定义样式的字符串。 |
本文链接：https://www.kjpai.cn/gushi/2024-04-29/163531.html，文章来源：网络cs，作者：淼淼，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。