Vue前端打印print设置自定义参数

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 参数配置

参数	类型	说明	可选值	默认值
printable	String、Object	pdf或图像url、html元素id或json数据对象。	null	null
type	String	打印的类型	pdf, html, image, json and raw-html	pdf'
header	String、Boolean	用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。	null	true
headerStyle	String	要应用于标题文本的可选标题样式	null	'font-weight: 300;'
maxWidth	Number	最大文档宽度（以像素为单位）。根据需要更改此项。打印HTML、图像或JSON时使用。	null	800
css	String	这允许我们传递一个或多个css文件URL，这些URL应应用于正在打印的html。值可以是具有单个URL的字符串，也可以是具有多个URL的数组。	null	null
style	String	这允许我们传递一个自定义样式的字符串，该字符串应用于正在打印的html。	null	null
scanStyles	Boolean	设置为false时，库不会处理应用于正在打印的html的样式。使用css参数时非常有用。	true, false	true
targetStyle	String	默认情况下，打印HTML元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。示例： ['padding-top', 'border-bottom']	null	null
targetStyles		但是，与“targetStyle”相同，这将处理一系列样式中的任何样式。例如：['border', 'padding']，将包括'border-bottom', 'border-top', 'border-left', 'border-right', 'padding-top'等。也可以传递['*']来处理所有样式。	null	null
ignoreElements	Array	接受打印父html元素时应忽略的html ID数组。	null	[ ]
properties	String	打印JSON时使用。这些是对象属性名称。	null	null
gridHeaderStyle	String	打印JSON数据时网格标题的可选样式。	null	'font-weight: bold;'
gridStyle	String	打印JSON数据时网格行的可选样式。	null	'border: 1px solid lightgray; margin-bottom: -1px;'
repeatTableHeader	Boolean	打印JSON数据时使用。设置为false时，数据表标题将仅显示在第一页中。	true,false	true
showModal		启用此选项可在检索或处理大型PDF文件时显示用户反馈。	null	null
modalMessage	String	showModal设置为true时向用户显示的消息。	null	'Retrieving Document...'
onLoadingStart	function	加载PDF时要执行的函数	null	null
onLoadingEnd	function	加载PDF后要执行的函数	null	null
documentTitle	String	打印html、图像或json时，这将显示为文档标题。	null	null
fallbackPrintable		打印pdf时，如果浏览器不兼容（请检查浏览器兼容性表），库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档，而不是传递到“可打印”中的原始pdf文档。如果在备用pdf文件中插入javascript，这可能很有用。	null	null
onPdfOpen		打印pdf时，如果浏览器不兼容（请检查浏览器兼容性表），库将在新选项卡中打开pdf。可以在此处传递回调函数，发生这种情况时将执行回调函数。在某些情况下，如果您希望处理打印流、更新用户界面等，它可能会很有用。	null	null
onPrintDialogClose		浏览器打印对话框关闭后执行回调函数。	null	null
base64	Boolean	打印作为base64数据传递的PDF文档时使用。	true，false	false