一、下载
1.使用 npm 进行安装
npm install print-js --save
2.使用 yarn 安装
yarn add print-js
3、导入
import print from 'print-js'
二、案例
1、打印HTML
<button @click="printer">打印</button>
<div id="printContent">
<!-- 需要打印的内容 -->
123
</div>
<script>
import printJS from 'print-js';
const printer = () =>{
printJS({
printable: '#printContent',
type: 'html',
});
}
</script>
2.打印Json
<button @click="printer">打印</button>
<script>
import printJS from 'print-js';
const printer = () =>{
printJS({
printable:[
{ date:"2008-08-08", name:"赛丽亚", intensify:"429" },
{ date:"2012-12-12", name:"派蒙", intensify:"648" },
],
properties: [ //表头
{field: 'date', displayName: '日期', },
{field: 'name', displayName: '姓名', },
{field: 'intensify', displayName: '变强', },
],
type: 'json',
header:"人员名单",
headerStyle:"text-align: center;font-weight: bold;",
documentTitle:"",
gridHeaderStyle: 'border: 1px solid #000;text-align:center',
gridStyle: 'border: 1px solid #000;text-align:center',
repeatTableHeader:true
})
}
</script>
3.打印图片
<button @click="printer">打印</button>
<script>
import printJS from 'print-js';
const printer = () =>{
printJS({
printable: [
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
],
type: 'image',
header: 'Multiple Images',
imageStyle: 'width:50%;margin-bottom:20px;'
})
}
</script>
三、配置项
属性 | 默认值 | 描述 |
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 的样式。使用参数时很有用。 |
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 数据时使用。设置为 时,数据表标题将仅显示在第一页中。 |
showModal | null | 启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。 |
modalMessage | 'Retrieving Document...' | 设置为 时向用户显示的消息。 |
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%;' | 打印图像时使用。接受要应用于每个图像的具有自定义样式的字符串。 |