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

Vue前端打印print设置自定义参数相关推荐

多个 VUE 前端工程部署设置、nginx 代理配置
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:早期我只有一个 VUE 前端工程:gentle-vue ,加一个 java 后端工程:gen ...
plupload怎么设置属性_Plupload设置自定义参数
在HTML 5比较流行的当下,Plupload是文件上传的不二之选,特别是Adobe宣布2020年将停止对Flash的更新支持.本文记录一下如何在上传文件的时候,传递自定义参数. 了解到两种方式,一种 ...
Vue 给第三方组件加入自定义参数
@change='onChangeChargeType('myparams',arguments[0],arguments[1])' 使用$event 或者 arguments可以获得参数,再加入自定 ...
vue @media print使用js插入打印页不同尺寸打印，可自定义尺寸大小，打印机配置
业务需求在开发时,遇到需求打印时既能切换A4纸张,又能切换成凭证纸张.而使用 @media 设置尺寸后,影响所有页面,无法实现打印多尺寸的问题. 打印技术使用浏览器自带的 print 打印技术打 ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
前端使用print.js实现打印
前言项目中经常会用到前端调用浏览器打印的功能,也经常会遇到一些问题,写这篇文章是为了更好的梳理一下相关内容.下面的内容基于vue. 如果需要用到前端生成二维码可以看我的这篇文章:在vue项目中使用q ...
Vue前端实现excel的导入、导出、打印功能
目录一.相关依赖下载二.excel导入功能三.table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格) 3.导出二维数据的table数据 4.导出合并单元格ta ...
vue项目实现前端打印功能
一.直接使用window自带的打印功能: window.print() <template><div><p>点击下面的按钮,可将div里的内容区域进行打印</ ...
html表格分页打印样式,vue部分打印（多页自动分页、打印样式自定义、多页打印表格页面顶部带表头）...
写在前面:注意打印表格时,若需要多页打印,则尽量使用原生table元素实现,这样在分页时每页顶部会带有表头,用户体验比较好一.引用插件(在 main.js 中全局引入!!注意,需要修改源码,所以尽量 ...

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

1. 安装组件

2.引入组件

3. 使用组件，（这里使用的是局部引入）

print-js 参数配置

Vue前端打印print设置自定义参数相关推荐

最新文章

热门文章