凡科免费建站,佛山企业设计网站建设,建设网站的网站空间,wordpress ftp 端口前端依赖10-插件print-js: “^1.6.0”
一#xff1a;简介
print-js 是一个 Vue.js 插件#xff0c;用于在 Vue.js 项目中实现打印功能。它依赖于 print-js 库#xff0c;所以需要安装这个库。
能实现以下功能#xff1a;
PDF打印#xff08;默认#xff…前端依赖10-插件print-js: “^1.6.0”
一简介
print-js 是一个 Vue.js 插件用于在 Vue.js 项目中实现打印功能。它依赖于 print-js 库所以需要安装这个库。
能实现以下功能
PDF打印默认网页打印图像打印JSON打印
参数默认值描述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应用于正在打印的 html 的 css 文件 URL。值可以是具有单个 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 数组。使其不打印。propertiesnull打印 JSON 时使用。这些是对象属性名称。gridHeaderStyle‘font-weight: bold;’打印 JSON 数据时网格标题的可选样式。gridStyle‘border: 1px solid lightgray; margin-bottom: -1px;’打印 JSON 数据时网格行的可选样式。repeatTableHeaderTRUE打印 JSON 数据时使用。设置为 false 时数据表标题将仅显示在第一页。showModalnull启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。modalMessageRetrieving Document…’当 showModal 设置为 true 时向用户显示的消息。onLoadingStartnull加载 PDF 时要执行的功能onLoadingEndnull加载 PDF 后要执行的功能documentTitleDocument’打印 html、图像或 json 时这将显示为文档标题。fallbackPrintablenull打印 pdf 时如果浏览器不兼容检查浏览器兼容性表库将在新选项卡中打开 pdf。这允许您传递要打开的不同pdf文档而不是在printable中传递的原始文档。如果您在备用pdf文件中注入javascript这可能很有用。onPdfOpennull打印 pdf 时如果浏览器不兼容检查浏览器兼容性表库将在新选项卡中打开 pdf。可以在此处传递回调函数该函数将在发生这种情况时执行。在某些情况下如果要处理打印流、更新用户界面等它可能很有用。onPrintDialogClosenull在浏览器打印对话框关闭后执行的回调函数。onErrorerror throw error发生错误时要执行的回调函数。base64false在打印作为 base64 数据传递的 PDF 文档时使用。honorMarginPadding (已弃用)true这用于保留或删除正在打印的元素中的填充和边距。有时这些样式设置在屏幕上很棒但在打印时看起来很糟糕。您可以通过将其设置为 false 来将其删除。honorColor (已弃用)false若要以彩色打印文本请将此属性设置为 true。默认情况下所有文本都将以黑色打印。font(已弃用)TimesNewRoman’打印 HTML 或 JSON 时使用的字体。font_size (已弃用)12pt’打印 HTML 或 JSON 时使用的字体大小。imageStyle(已弃用)width:100%;’打印图像时使用。接受具有要应用于每个图像的自定义样式的字符串。
二官网
https://www.npmjs.com/package/print-js
三常规JS使用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://printjs-4de6.kxcdn.com/print.min.js/scriptlink relstylesheet typetext/css hrefhttps://printjs-4de6.kxcdn.com/print.min.cssscriptsomeJSONdata [{name: John Doe,email: johndoe.com,phone: 111-111-1111},{name: Barry Allen,email: barryflash.com,phone: 222-222-2222},{name: Cool Dude,email: cooldude.com,phone: 333-333-3333}]/script
/head
body
button typebutton onclickprintJS({printable: someJSONdata, properties: [name, email, phone], type: json})Print JSON Data
/button
/body
/html四VUE2使用
npm install print-jstemplatedivbutton clickprintDocumentPrint/buttondiv idcontentToPrint!-- 这里是你想要打印的内容 --h1Hello, PrintJS!/h1pThis is the content to be printed./p/div/div
/templatescript
export default {methods: {printDocument() {const printJS require(print-js)printJS({printable:contentToPrint,type: html})}}
}
/script在上述示例中我们有一个按钮点击按钮将触发 printDocument 方法来执行打印操作。我们在 div 元素中定义了一个 ID 为 contentToPrint 的容器其中包含了我们要打印的内容。当点击按钮时printDocument 方法将使用 print-js 库来打印具有 ID 为 contentToPrint 的元素。
在 printDocument 方法中我们使用 require 函数来动态加载 print-js 库并调用 printJS 函数来执行打印操作。第一个参数传递了要打印的内容的 DOM 元素的 ID这里是 contentToPrint第二个参数传递了打印类型这里是 ‘html’。
确保在项目中安装了 print-js使用 npm 或 yarn并将示例代码放在 Vue 组件中以便在 Vue 2 中使用 print-js。记得替换 h1Hello, PrintJS!/h1 和 pThis is the content to be printed./p 为你实际想要打印的内容。
通过点击按钮你应该能够触发打印操作并将指定的内容打印出来。 注意 上边的参数 ‘html’ 必须有否则会报错 因为默认打印是pdf的而我们刚才的形式是html的格式 五VUE3使用
npm install print-jstemplatedivbutton clickprintDocumentPrint/buttondiv refcontentToPrint!-- 这里是你想要打印的内容 --h1Hello, PrintJS!/h1pThis is the content to be printed./p/div/div
/templatescript
import printJS from print-jsexport default {methods: {printDocument() {printJS({printable: this.$refs.contentToPrint,type: html})}}
}
/script
在上述示例中我们有一个按钮点击按钮将触发 printDocument 方法来执行打印操作。我们使用 ref 绑定将 contentToPrint 指定为要打印的内容的容器。
在 printDocument 方法中我们使用 print-js 库的对象参数形式来进行打印。我们传递了一个包含 printable 和 type 属性的对象作为参数。printable 属性指定要打印的内容我们使用 this.$refs.contentToPrint 引用到 Vue 组件中的 contentToPrint 元素。type 属性指定打印类型为 html。
确保在项目中安装了 print-js使用 npm 或 yarn并将示例代码放在 Vue 组件中以便在 Vue 3 中使用 print-js。记得替换 h1Hello, PrintJS!/h1 和 pThis is the content to be printed./p 为你实际想要打印的内容。
通过点击按钮你应该能够触发打印操作并将指定的内容打印出来。如果有任何其他问题请随时提问。 六、其他Type示例
1.pdf
printJS(docs/printjs.pdf)
// 或
printJS({printable:docs/printjs.pdf, type:pdf, showModal:true})
2.image单个图像
printJS(images/print-01-highres.jpg, image)
// 或
printJS({printable: images/print-01-highres.jpg, type: image, header: My cool image header})
3.image多个图像
printJS({
printable: [images/print-01-highres.jpg, images/print-02-highres.jpg, images/print-03-highres.jpg],
type: image,
header: Multiple Images,
imageStyle: width:50%;margin-bottom:20px;
})
4.json someJSONdata [{name: John Doe,email: johndoe.com,phone: 111-111-1111},{name: Barry Allen,email: barryflash.com,phone: 222-222-2222},{name: Cool Dude,email: cooldude.com,phone: 333-333-3333}]printJS({printable: someJSONdata,properties: [name, email, phone],type: json,gridHeaderStyle: color: red; border: 2px solid #3971A5;,gridStyle: border: 2px solid #3971A5;
})
