Vue中使用Printjs插件实现打印功能

2024-08-24 22:14:17

前言

客户需求： 表单支持在线打印
实现思路： 百度…百度…百度之后，printjs 这款插件比较满足需求，无需下载，无需写打印模板，并且兼容Element-ui中el-form表单的打印。

一、Print.js介绍

Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件，无需离开界面，也无需使用嵌入。对于用户无需打开或下载 PDF 文件而只需打印它们的特殊情况。
支持“pdf”、“html”、“image”和“json”四种打印文档类型。默认为“pdf”。

PrintJS参数配置表

参数	默认值	描述
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	应用于正在打印的 html 的 css 文件 URL。值可以是具有单个 URL 的字符串或具有多个 URL 的数组。
style	null	自定义样式的字符串。应用于正在打印的 html。
scanStyles	true	设置为 false 时，库将不会处理应用于正在打印的 html 的样式。在使用 css 参数时很有用。
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 数据时使用。设置为 false 时，数据表标题将仅显示在第一页。
showModal	null	启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。
modalMessage	Retrieving Document…’	当 showModal 设置为 true 时向用户显示的消息。
onLoadingStart	null	加载 PDF 时要执行的功能
onLoadingEnd	null	加载 PDF 后要执行的功能
documentTitle	Document’	打印 html、图像或 json 时，这将显示为文档标题。
fallbackPrintable	null	打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。这允许您传递要打开的不同pdf文档，而不是在printable中传递的原始文档。如果您在备用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%;’	打印图像时使用。接受具有要应用于每个图像的自定义样式的字符串。

二、安装/引入

方法1.下载print.js

从官网下载print.js，将下载的 print.js 放入项目utils文件夹
可以全局引入即（在main.js中引入），也可以在需要的文件里面引入import Print from './utils/print'

方法2.使用npm安装print插件

安装print-jsnpm install print-js --save
可以全局引入即（在main.js中引入），也可以在需要的文件里面引入 import Print from 'print-js'

三、使用-“html”类型

在表单页面中调用打印方法

<template>
  <div class="app-container">
    <div id="printFrom">
      <el-form :ref="formRef" :model="form" :rules="validateRules">
      ...
      </el-form>
      <el-button type="info" @click="handlePrint(printData)">打印</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      formRef: 'form',
      validateRules: [],
      printData: {
        printable: 'printFrom',
        header: '申请表',
        ignore: ['no-print']
      }
    }
  },
   handlePrint(params) {
     printJS({
       printable: params.printable, // 'printFrom', // 标签元素id
       type: params.type || 'html',
       header: params.header, // '表单',
       targetStyles: ['*'],
       style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
       ignoreElements: params.ignore || [], // ['no-print']
       properties: params.properties || null
     })
   }
 }
}
</script>

点击打印按钮，弹出打印预览界面，右边栏调整打印界面。
假设出现打印不全的问题，可以通过缩放来进行设置，数值越小，缩放的越小。

四、其他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: 'john@doe.com',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: 'barry@flash.com',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: 'cool@dude.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;'
})

更多示例请参考Print.js官网。

总结

以上便是printjs插件的使用场景，希望对大家有所帮助。

到此这篇关于Vue中使用Printjs插件实现打印功能的文章就介绍到这了,更多相关Vue Printjs打印插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue中使用vue-print.js实现多页打印

本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题. 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装下载 print.js https://github.com/zxc19890923/pr
Vue中使用Lodop插件实现打印功能的简单方法

介绍需要进行打印功能,Lodop就是实现需求的插件.就是引入对应的js-sdk,使用js调用对应的打印方法,然后就会调出客户端软件(需要用户安装),然后就可以在软件里面打印内容了. 使用方法最小实现实现打印必须要执行的3个最基本的方法 LODOP.PRINT_INIT("打印任务名"); //首先一个初始化语句 LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本内容一");//然后多个ADD语句及SET语句 LODOP.PRINT(); /
详解如何在vue项目中使用lodop打印插件

项目中使用到打印的功能.领导推荐使用Lodop Lodop是什么东东,反正就是可以定制打印的插件... 既然是插件,vue的渐进式开发.完全可以拿来化为己用. 如何使用那?先大概看了下开发文档,就是一堆demo,一个js文件,三个安装程序,我擦,这么简单.come on 电脑安装C-Lodop,就可以打印预览来了. 开工,翻来覆去就一个LodopFuncs.js是干货,扔到项目中.就差怎么调里面的方法了. 如何引用,当然得改造喽 LodopFuncs.js 方法改造如下 //====判断是否需要
vue 中使用print.js导出pdf操作

1.print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") {
vue打印插件vue-print-nb的实现代码

1.引入插件npm install vue-print-nb --save 在main.js中引入 import Print from 'vue-print-nb'Vue.use(Print) 2.html代码 <div class="box"> <div id="printTest" class="upTable"> <table> <tr> <td class="title&qu
vue print.js打印支持Echarts图表操作

网上找的print.js做了修改,支持Echarts图表这里记录一下,不知道是哪家的代码了,我看都一样这里是看到了两个源码 https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js https://github.com/denghao123/Print.js 以下是我修改过的 print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = function (dom, opt
Vue中使用Printjs插件实现打印功能

目录前言一.Print.js介绍二.安装/引入方法1.下载print.js 方法2.使用npm安装print插件三.使用-“html”类型四.其他Type示例总结前言客户需求: 表单支持在线打印实现思路: 百度…百度…百度之后,printjs 这款插件比较满足需求,无需下载,无需写打印模板,并且兼容Element-ui中el-form表单的打印. 一.Print.js介绍 Print.js官网 Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件,无需离
Vue中使用vue-i18插件实现多语言切换功能

在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下: step1: 在项目中安装vue-i18插件 cnpm install vue-i18n --save-dev step2:在项目的入口文件main.js中引入vue-i18n插件 import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n
解决vue中使用swiper插件问题及swiper在vue中的用法

Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas
vue中七牛插件使用的实例代码

本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下: <template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script&g
vue中element-ui表格缩略图悬浮放大功能的实例代码

element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="
Vue中使用sass实现换肤功能

先给大家展示下效果图: 先给大家看一下目录和主要文件: 解释一下主要文件: base.scss: 一些通用样式文件. mixin.scss: 定义mixin方法的文件. varibale.scss: 颜色,字体,背景的配置文件以下就拿封装的head组件代码来展示以下实现逻辑,现在大家主要是来理解,不要着急复制代码,在文章最后会贴出三个主要文件的代码的. 为什么会在 background:$background-color-theme; 地方标注错误? 如果之前用过sass的同学可能会知道,这样
vue中实现Monaco Editor自定义提示功能

这次接到一个需求,要在浏览器的 IDE 中支持自定义提示功能,如下所示: 可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配的那一项. 项目的框架是 Vue ,编辑器用的是 Monaco Editor . 什么是 Monaco Editor vscode 是我们经常在用的编辑器,它的前身是微软的一个叫 Monaco Workbench 的项目,而 Monaco Editor 就是从这个项目中成长出来的一个 web 编辑器,他们很大一部分的代码都是共用的,所以 Monaco Edit
vue中添加与删除关键字搜索功能

具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
vue中使用elementUI组件手动上传图片功能

Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim