vue 使用print-js 打印渲染不出来问题
使用print-js 打印渲染不出来
vue 使用print-js 打印渲染不出来, 实际数据已经加载出来了。
遇到这问题,解决方向
1、是否是数据未赋值上
2、打印加载js是否渲染上
所以:在vue中可以使用id的形式和ref的形式进行绑定,如果id绑定渲染不成功的话可以尝试
<div id="printDiv" ref="printDiv"/> this.$refs.printDiv print({ printable: this.$refs.printDiv, type: 'html', scanStyles: false })
vue中printjs使用指南
使用攻略
参考文档:https://printjs.crabbly.com/
分页:使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面
<div style="page-break-after:always">我是封面</div> <div style="page-break-after:always">我是目录,你不知道我的内容有多长</div> <div>我是正文,我需要从一个新页面开始展示</div>
标题栏每页重复打印:因为打印时,表格中的thead和tfoot默认会在每一页重复打印,所以只要设置好表格结构就行。
html打印
<div id="printJS-table"> <table class="printTable" style="width: 100%; text-align: center" border="0"> <thead> <tr class="maintitle"> <td :colspan="columns.length"> <span style="font-size: 20px">{{ modelRef.hospitalName }} 标本阳性率报表</span> </td> </tr> <tr class="subtitle"> <td :colspan="2"> 统计时间:{{ modelRef.inlineForm.timeSpan[0].format('YYYY/MM/DD') }}-{{ modelRef.inlineForm.timeSpan[1].format('YYYY/MM/DD') }} </td> <td :colspan="columns.length - 4">制表人:{{ modelRef.username }}</td> <td :colspan="2">打印时间:{{ moment().format('YYYY/MM/DD') }}</td> </tr> <tr class="header"> <th v-for="item in columns" width="">{{ item.title }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in printDatalist" :class="{ strongRow: row.sampletype == '合计' }" > <td :class="{ lastRow: printDatalist.length == index + 1 }" v-for="column in columns" > {{ row[column.dataIndex] }} </td> </tr> </tbody> </table> </div>
const handlePrint1 = () => { printJS({ printable: 'printJS-table', type: 'html', // targetStyles: ['*'], // headerStyle: 'font-size:20px', style: ` @page { margin: 0.5cm; margin-right: 0.5cm; margin-top: 0.5cm; margin-bottom: 0.3cm; padding-bottom: 0px;} .printTable thead .maintitle { text-align: center; font-size: 20px; } .printTable thead .subtitle { text-align: center; font-size: 13px; } .printTable thead .header th { border-top: 1px solid #000; border-right: 1px solid #000; } .printTable thead .header th:nth-child(1) { border-left: 1px solid #000; } tbody td { border: 1px solid #000; } .printTable tbody .strongRow { font-weight: bold; } tbody { text-align: center; } table { border-collapse: collapse; } `, }); };
以json格式打印
const handlePrint = () => { let printColumns = columns.value.map((ele: any) => { return { field: ele.dataIndex, displayName: ele.title, }; }); printJS({ printable: dataSource.value, maxWidth: 2500, properties: printColumns, header: ` <div class="titleDiv"> <div class="title">${modelRef.hospitalName} 标本阳性率报表</div> <div class="subtitle"> <div class="label"> 统计时间:${modelRef.inlineForm.timeSpan[0].format( 'YYYY/MM/DD', )}-${modelRef.inlineForm.timeSpan[1].format('YYYY/MM/DD')} </div> <div class="label">制表人:${modelRef.username}</div> <div class="label">打印时间:${moment().format('YYYY/MM/DD')} </div> </div> </div> `, //size: landscape; style: `@page { margin: 0.5cm; margin-right: 0.5cm; margin-top: 0.5cm; margin-bottom: 0.3cm; padding-bottom: 0px; } .title { margin-top: 10px; font-size: 20px; text-align: center; padding:10px; } .subtitle { display: flex; justify-content: space-between; font-size: 16px; padding:10px; } .subtitle .label { flex: 1; font-size: 14px; } .subtitle .label:nth-child(2) { text-align: center; } .subtitle .label:nth-child(3) { text-align: right; } `, gridStyle: 'text-align: center; border: 1px solid black;', gridHeaderStyle: 'border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black; border-bottom: 0px;', type: 'json', }); };
参数
参数 | 默认值 | 说明 |
---|---|---|
printable | null | 文档源:pdf 或图像 url、html 元素 id 或 json 数据对象。 |
type | ‘pdf’ | |
header | null | 用于 HTML、图像或 JSON 打印的可选标头。它将放置在页面顶部。此属性将接受文本或原始 HTML。 |
headerStyle | ‘font-weight: 300;’ | 要应用于页眉文本的可选页眉样式。 |
maxWidth | 800 | 最大文档宽度(以像素为单位)。根据需要更改此设置。在打印 HTML、图像或 JSON 时使用。 |
css | null | 这允许我们传递一个或多个应应用于正在打印的html的css文件URL。值可以是具有单个 URL 的字符串,也可以是具有多个 URL 的数组。 |
style | null | 这允许我们传递一个具有自定义样式的字符串,该字符串应应用于正在打印的html。 |
scanStyles | true | 设置为 false 时,库将不会处理应用于正在打印的 html 的样式。使用参数css时很有用。 |
targetStyle | null | 默认情况下,在打印 HTML 元素时,库仅处理某些样式。此选项允许您传递要处理的样式数组。例如:[‘padding-top’, ‘border-bottom’] |
targetStyles | null | 但是,与"targetStyle"相同,这将处理任何一系列样式。例如:[‘border’, ‘padding’],将包括’border-bottom’, ‘border-top’, ‘border-left’, ‘border-right’, '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、图像或 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://blog.csdn.net/u014370269/article/details/126609583
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25