vue中实现打印

一、VUE 集成 LODOP插件打印

VUE 集成LODOP插件打印

Lodop、C-Lodop使用说明及样例

C-Lodop插件官网：功能演示 – Lodop和C-Lodop官网主站

参考文章：VUE 集成 LODOP插件打印_廷贺的博客-CSDN博客

二、winodw.print()打印

print()方法用于打印当前窗口的内容。调用print()方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用document.querySelector('print')也可以达到同样的效果。默认打印页面中body里的所有内容。

// 打印var global_Html = "";function printme() {global_Html = document.body.innerHTML;document.body.innerHTML = document.getElementById('primary').innerHTML;　　　　　　　　　　　window.print();window.setTimeout(function() {document.body.innerHTML = global_Html;}, 500);}

1.简单使用

参考文章连接1：vue、js 打印 window.print（）方法_gu_eu的博客-CSDN博客_js afterprint

参考文章连接2：window.print()局部打印三种方式 – 硅谷工具人 – 博客园

参考文章连接3：vue，打印案例 window.print() 的完美实现_kaiking_g的博客-CSDN博客_// 打印类属性、方法定义 /* eslint-disable */

2.本人创建组件模板使用案例

2.1 创建 print.js 文件

// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) {options = options || {}if (!(this instanceof Print)) return new Print(dom, options);this.conf = {isAllStyle:false, // 是否加载当前页面所有样式styleStr:'',// 设置样式字符串setDomHeightArr: [], // 需要动态获取并设置高度的 元素echartDomArr: [], // echart domprintBeforeFn: null, // 打印前回调printDoneCallBack: null // 打印后回调}for (const key in this.conf) {if (key && options.hasOwnProperty(key)) {this.conf[key] = options[key]}}// debuggerif ((typeof dom) === "string") {this.dom = document.querySelector(dom);} else {this.dom = this.isDOM(dom) ? dom : dom.$el;}if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) {this.setDomHeight(this.conf.setDomHeightArr);}this.init();};Print.prototype = {/** * 初始化 */init: function () {var content = this.getStyle() + this.getHtml();this.writeIframe(content);},/** * 配置属性扩展 * @param {Object} obj * @param {Object} obj2 */extendOptions: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},/** 复制原网页所有的样式 */getStyle: function () {var str = ""if(this.conf.isAllStyle){let styles = document.querySelectorAll('style,link');for (var i = 0; i < styles.length; i++) {str += styles[i].outerHTML;}}str += `.no-print{display:none;}${this.conf.styleStr}`;return str;},// 表单赋值getHtml: function () {var inputs = document.querySelectorAll('input');var textareas = document.querySelectorAll('textarea');var selects = document.querySelectorAll('select');// debuggerfor (var k = 0; k < inputs.length; k++) {if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {if (inputs[k].checked == true) {inputs[k].setAttribute('checked', "checked")} else {inputs[k].removeAttribute('checked')}} else if (inputs[k].type == "text") {inputs[k].setAttribute('value', inputs[k].value)} else {inputs[k].setAttribute('value', inputs[k].value)}}for (var k2 = 0; k2 < textareas.length; k2++) {if (textareas[k2].type == 'textarea') {textareas[k2].innerHTML = textareas[k2].value}}for (var k3 = 0; k3  {_this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)// 弹出后，回调if (_this.conf.printDoneCallBack) {_this.conf.printDoneCallBack()}}, 100)})}},/** * 项目用到echarts，需要获取图片，来打印 * @param {Object} doc iframe window */drawEchartImg(doc) {return new Promise((resolve, reject) => {if (this.conf.echartDomArr && this.conf.echartDomArr.length > 0) {this.conf.echartDomArr.forEach(e => {const dom = doc.querySelector('#' + e.$el.id)const img = new Image()const w = dom.offsetWidth + 'px'const H = dom.offsetHeight + 'px'img.style.width = wimg.style.height = Himg.src = e.imgSrcdom.innerHTML = ''dom.appendChild(img)})}resolve()})},/** 打印 */toPrint: function (frameWindow) {try {setTimeout(function () {frameWindow.focus();try {if (!frameWindow.document.execCommand('print', false, null)) {frameWindow.print();}} catch (e) {frameWindow.print();}frameWindow.close();}, 10);} catch (err) {console.log('err', err);}},isDOM: (typeof HTMLElement === 'object') ?function (obj) {return obj instanceof HTMLElement;} :function (obj) {return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';},/** * 设置指定dom元素高度，通过获取该dom元素现有高度，并设置 * @param {Array} arr */setDomHeight(arr) {if (arr && arr.length) {arr.forEach(name => {const domArr = document.querySelectorAll(name);// debuggerdomArr.forEach(dom => {dom.style.height = dom.offsetHeight + 'px';})})}}};const MyPlugin = {}MyPlugin.install = function (Vue, options) {// 4. 添加实例方法Vue.prototype.$print = Print};export default MyPlugin

2.2 在 main.js 文件中引入，全局使用

import print from '@/utils/print'Vue.use(print)

2.3 创建请假组件模板LeavePrintView.vue

请假条
申请人
{{infoForm&&infoForm.createUserName?infoForm.createUserName:''}}
所属部门
{{infoForm&&infoForm.userDeptName?infoForm.userDeptName:''}}
请假时长
{{infoForm&&infoForm.timelen?infoForm.timelen:''}}小时
请假类型
{{infoForm&&infoForm.leaveTypeLabel?infoForm.leaveTypeLabel:''}}
请假事由
{{infoForm&&infoForm.content?infoForm.content:''}}
申请时间
{{infoForm&&infoForm.createTime?momentObj(infoForm.createTime).format('YYYY-MM-DD'):''}}
开始时间
{{infoForm&&infoForm.startTime?infoForm.startTime:''}}
结束时间
{{infoForm&&infoForm.endTime?infoForm.endTime:''}}
审批
{{item.name}}
抄送
{{item.name}}
备注
import moment from "moment"; // 日期格式化工具import {mapState} from "vuex";export default {name: 'PrintView',props: {//父组件传递 姓名字段name: {type: String,default: ''},//父组件传递 部门字段deptName: {type: String,default: ''},//父组件传递 时长字段duration: {type: String,default: ''},//父组件传递对象参数infoForm: {type: Object,default () {return {}}},},data() {return {momentObj: null,checkUserIds:null,copyUserIds:null}},created() {this.momentObj=moment},watch: {},computed: {...mapState(['allUserlist']), // 获取用户数据},/**以下所有方法采用同步调用，防止打印时数据丢失**/methods: {/** 数据进行封装，页面进行回显 **/async getCheckUser(checkUserId,copyUserId){this.checkUserIds=await this.filterCheckedusers(checkUserId);this.copyUserIds= await this.filterCheckedusers(copyUserId);},/* 审批人 刷选 暴力方法，没做去重直接是清空在复制*/async filterCheckedusers(checkedIds) {checkedIds = checkedIds ? checkedIds.split(',') : []const checkedusers = []if(Array.isArray(checkedIds)) {checkedIds.forEach(item => {checkedusers.push(this.allUserlist.filter(i => (Boolean(item) && i.id === item))[0] )})} else if(checkedIds) {checkedusers.push(this.allUserlist.filter(i => i.id === checkedIds)[0])}return checkedusers.filter(item => item !== undefined)},},}

2.4 使用组件模板

打印// 引用组件import PrintView from "@/components/print/LeavePrintView";export default {name: 'approval-detail',data() {return {infoForm: {checkUserId:'',copyUserId:''},}},components: {PrintView },methods: {async printHandle(){// 调用子组件方法-进行数据封装await this.$refs.PrintView.getCheckUser(this.infoForm.checkUserId,this.infoForm.copyUserId)// 调用工具类中的打印方法，进行打印this.$print(this.$refs.PrintView.$el, {'styleStr': '#PrintView{display:block !important;}'})},},}