1. 安装组件

npm install print-js --save

2.引入组件

import print from "print-js";

3. 使用组件,(这里使用的是局部引入)

<template>
  <div id="printid">显示的内容</div>  
  <div @click="bindPrint">打印</div>
</template>
<script>
  import print from "print-js"
  export default {
    data () {
      return {
        
      }
    },
    methods:{
      bindPrint( () => {
         print({
          printable: "printid",
          type:'html',
          header:null,
          targetStyles:['*'],
          style:"@page {margin:0 10mm}"
        })
      })
    }
  }
</script>

print-js 参数配置

参数类型说明可选值默认值
printableString、Objectpdf或图像url、html元素id或json数据对象。nullnull
typeString打印的类型pdf, html, image, json and raw-htmlpdf'
headerString、Boolean用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。nulltrue
headerStyleString要应用于标题文本的可选标题样式null'font-weight: 300;'
maxWidthNumber最大文档宽度(以像素为单位)。根据需要更改此项。打印HTML、图像或JSON时使用。null800
cssString这允许我们传递一个或多个css文件URL,这些URL应应用于正在打印的html。值可以是具有单个URL的字符串,也可以是具有多个URL的数组。nullnull
styleString这允许我们传递一个自定义样式的字符串,该字符串应用于正在打印的html。nullnull
scanStylesBoolean设置为false时,库不会处理应用于正在打印的html的样式。使用css参数时非常有用。true, falsetrue
targetStyleString默认情况下,打印HTML元素时,库仅处理某些样式。此选项允许您传递要处理的样式数组。示例: ['padding-top', 'border-bottom']nullnull
targetStyles

但是,与“targetStyle”相同,这将处理一系列样式中的任何样式。例如:['border', 'padding'],将包括'border-bottom', 'border-top', 'border-left', 'border-right', 'padding-top'等。也可以传递['*']来处理所有样式。

nullnull
ignoreElementsArray接受打印父html元素时应忽略的html ID数组。null[ ]
propertiesString打印JSON时使用。这些是对象属性名称。nullnull
gridHeaderStyleString打印JSON数据时网格标题的可选样式。null'font-weight: bold;'
gridStyleString打印JSON数据时网格行的可选样式。null'border: 1px solid lightgray; margin-bottom: -1px;'
repeatTableHeaderBoolean打印JSON数据时使用。设置为false时,数据表标题将仅显示在第一页中。true,falsetrue
showModal启用此选项可在检索或处理大型PDF文件时显示用户反馈。nullnull
modalMessageStringshowModal设置为true时向用户显示的消息。null'Retrieving Document...'
onLoadingStartfunction加载PDF时要执行的函数nullnull
onLoadingEndfunction加载PDF后要执行的函数nullnull
documentTitleString打印html、图像或json时,这将显示为文档标题。nullnull
fallbackPrintable

打印pdf时,如果浏览器不兼容(请检查浏览器兼容性表),库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档,而不是传递到“可打印”中的原始pdf文档。如果在备用pdf文件中插入javascript,这可能很有用。

nullnull
onPdfOpen

打印pdf时,如果浏览器不兼容(请检查浏览器兼容性表),库将在新选项卡中打开pdf。可以在此处传递回调函数,发生这种情况时将执行回调函数。在某些情况下,如果您希望处理打印流、更新用户界面等,它可能会很有用。

nullnull
onPrintDialogClose浏览器打印对话框关闭后执行回调函数。nullnull
base64Boolean打印作为base64数据传递的PDF文档时使用。true,falsefalse

Logo

前往低代码交流专区

更多推荐