大连网站建设资讯,网站建设公司logo,试卷a《网站建设与管理》,关键词和网站的关系vue3实现指定区域打印#xff08;导出#xff09;功能-主要是解决分页内容分割问题 一、 问题页面效果二、 Print.js相关属性 和使用1. 介绍2. 安装引入3. PrintJS参数配置表 三 、解决关于分页文字或者表格被分割问题#xff0c;解决后如下#xff1a;1. 设置一个自定义ta… vue3实现指定区域打印导出功能-主要是解决分页内容分割问题 一、 问题页面效果二、 Print.js相关属性 和使用1. 介绍2. 安装引入3. PrintJS参数配置表 三 、解决关于分页文字或者表格被分割问题解决后如下1. 设置一个自定义table2. 运行后效果3. 添加导出打印js4.解决后导出打印效果 四、 element-ui中使用 待更新....... 一、 问题页面效果 实现功能自定义table表格包含行和列的合并要求保持css样式不懂能直接导出打印成A4常见问题能实现生成图片导出唤起打印窗口但是会出现文字分列被分割问题如下两种被分割情况文字被分割或者行被分割 二、 Print.js相关属性 和使用
1. 介绍
官网https://printjs.crabbly.com 一个小的javascript库帮助从web打印和保存。在应用程序中直接打印PDF文件而编写的不需要离开界面也不需要使用嵌入。 2. 安装引入
使用npm安装 npm install print-js --save使用纱线安装 yarn add print-js引入
import printJS from print-js;3. PrintJS参数配置表
浏览器翻译的 也可以自己去官网查看https://printjs.crabbly.com
参数默认值描述printablenull文档来源:pdf或图像url, html元素id或json数据对象。type‘pdf’可打印类型。可用的打印选项有:pdf, html, image, json和raw-html。headernull可选标题与HTML、图像或JSON打印一起使用。它将被放置在页面顶部。此属性将接受文本或原始HTML。headerStyle‘font-weight: 300;’可选的标题样式应用于标题文本。maxWidth800最大文档宽度以像素为单位。根据需要进行更改。打印HTML、图像或JSON时使用。cssnull这允许我们传递一个或多个css文件URL这些URL应该应用于正在打印的html。值可以是具有单个URL的字符串或具有多个URL的数组。stylenull这允许我们传递一个具有自定义样式的字符串该字符串应应用于正在打印的html。scanStylestrue当设置为false时库将不会处理应用于正在打印的html的样式。使用css参数时很有用。targetStylenull默认情况下在打印HTML元素时库仅处理某些样式。此选项允许您传递要处理的样式数组。例如[‘padding-top’‘border-bottom’]targetStylesnull与“targetStyle”一样这将处理任何一系列样式。例如[‘border’‘padding’]将包括’border-bottom’‘border-top’‘border-left’‘border-right’‘padding-top’等。您也可以传递[’*]来处理所有样式。ignoreElements[]接受打印父html元素时应忽略的html ID数组。propertiesnullJSON时使用。这些是对象属性名称。gridHeaderStyle‘font-weight: bold;’JSON数据时网格标头的可选样式。gridStyle‘border: 1px solid lightgray; margin-bottom: -1px;’JSON数据时网格行的可选样式。repeatTableHeadertrueJSON数据时使用。当设置为false时数据表标题将仅显示在第一页中。showModalnull此选项以在检索或处理大型PDF文件时显示用户反馈。modalMessage‘Retrieving Document…’当showModal设置为true向用户显示的消息。onLoadingStartnull加载PDF时要执行的函数onLoadingEndnull加载PDF后要执行的功能documentTitle‘Document’打印html、图像或json时这将显示为文档标题。fallbackPrintablenull打印pdf时如果浏览器不兼容检查浏览器兼容性表库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档而不是以“可打印”方式传递的原件。如果您在备用pdf文件中注入javascript这可能会很有用。onPdfOpennull打印pdf时如果浏览器不兼容检查浏览器兼容性表库将在新选项卡中打开pdf。可以在这里传递一个回调函数当发生这种情况时该函数将被执行。在某些情况下当您想处理打印流程、更新用户界面等时它可能会很有用。onPrintDialogClosenull浏览器打印对话框关闭后执行回调功能。onErrorerror throw error文档来源:pdf或图像url, html元素id或json数据对象。base64null文档来源:pdf或图像url, html元素id或json数据对象。
三 、解决关于分页文字或者表格被分割问题解决后如下 ⚠️ 注意 ⚠️ 此方法只适用于原声table使用因为禁止行内分页属性不能绝对定位使用一般的el-table等组件里边有使用定位
1. 设置一个自定义table
!-- html --el-button clickgenerateImage导出唤起打印/el-buttontable idtableDataDayintrth rowspan2Name/thth colspan2Details/th/trtrthAge/ththAddress/th/trtrtdJohn/tdtd30/tdtd rowspan2New York/td/trtrtdJane/tdtd25/td/trtr v-forindex in 16 :keyindextdJane/tdtd25/tdtdNew减肥还得好几个返回结核杆菌快递发货个i哦怕u分9外俄文i哦额UI日哦额回个i哦怕u分9外俄文i哦额UI日哦额回复{{index}}/td/trtrtdJohn/tdtd30/tdtd rowspan3New York/td/trtrtdJane/tdtd25/td/trtrtdJane/tdtd25/td/trtrtdJohn/tdtd30/tdtd rowspan2New York/td/trtrtdJane/tdtd25/td/tr/table!-- css --
#tableDataDayin {border-collapse: collapse;width: 100%;
}#tableDataDayin th {background-color: #f2f2f2;border: 1px solid #ddd;
}#tableDataDayin td {border: 1px solid #ddd;padding: 8px;
}#tableDataDayin th,
#tableDataDayin td {text-align: left;page-break-inside: avoid !important; //主要就是这个属性 禁止行内分页
}#tableDataDayin tr:nth-child(odd) {background-color: #f7f7f7;
}#tableDataDayin tr:nth-child(even) {background-color: #f2f2f2;
}2. 运行后效果 3. 添加导出打印js
!-- js --
script setup langts
import printJS from print-js;const generateImage () {printJS({printable: tableDataDayin, //table表格 idtype: html, // 类型targetStyles: [*],});
};
/script4.解决后导出打印效果 四、 element-ui中使用 待更新…
