vue 实现下载pdf、导出png、打印功能

1.下载PDF

引入 html2canvas 和 jspdf

npm install html2canvas
npm install jspdf --save

2.在utils文件创建htmlToPdf.js

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install(Vue, options) {Vue.prototype.getPdf = function(title) {var element = document.querySelector('#pdfDom'); // 这个dom元素是要导出pdf的div容器setTimeout(() => {html2Canvas(element).then(function(canvas) {var contentWidth = canvas.width;var contentHeight = canvas.height;// 一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;// 未生成pdf的html页面高度var leftHeight = contentHeight;// 页面偏移var position = 0;// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高var imgWidth = 595.28;var imgHeight = 592.28 / contentWidth * contentHeight;var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new JsPDF('', 'pt', 'a4');// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeight;position -= 841.89;// 避免添加空白页if (leftHeight > 0) {pdf.addPage();}}}pdf.save(title + '.pdf');});}, 0);}}
}

3.mian.js 全局引用

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

4.vue 文件使用

<template><div id="pdfDom"><div class="title-right title-right"><button @click="pfdBtn"class="title-right-button no-print" data-html2canvas-ignore="true"> 下载PDF </button><button data-html2canvas-ignore="true"class="title-right-button no-print"@click="pbgBtn"> 下载PNG </button><button data-html2canvas-ignore="true"class="title-right-button no-print"@click="printBtn"> 打印 </button></div></div>
</template>
methods: {
pfdBtn () {window.scrollTo(0, 0);this.getPdf(this.title);},
}

2.导出png

vue 文件(data-html2canvas-ignore=“true”)导出不显示

<template><section  class="report"ref="imageDom"id="pdfDom"><div class="report-container"><div class="title"><div class="title-middle"></div><div class="title-right title-right"><button @click="pfdBtn"class="title-right-button no-print"data-html2canvas-ignore="true"> 下载PDF </button><button data-html2canvas-ignore="true"class="title-right-button no-print"@click="pbgBtn"> 下载PNG </button><button data-html2canvas-ignore="true"class="title-right-button no-print"@click="printBtn"> 打印 </button></div></div><div class="user-info"><div class="user-info-top"><div class="user-info-top-left"><div class="line-input"><div class="line-input-title">报告：</div><input type="text"class="line-input-input"></div></div></div></div></div></section >
</template>
<script>
import html2canvas from 'html2canvas';export default {data () {return {}},methods: {pbgBtn () {html2canvas(this.$refs.imageDom, {backgroundColor: '#ffffff'}).then(canvas => {var imgData = canvas.toDataURL("image/jpeg");this.fileDownload(imgData);})},fileDownload (downloadUrl, file) {let aLink = document.createElement("a");aLink.style.display = "none";aLink.href = downloadUrl;aLink.download = file;// 触发点击-然后移除document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink);},printBtn () {this.$print(this.$refs.imageDom)},}
}
</script>

3.vue打印

1.首先在utils创建的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") {this.dom = document.querySelector(dom);} else {this.isDOM(dom)this.dom = this.isDOM(dom) ? dom : dom.$el;}this.init();
};
Print.prototype = {init: function () {var content = this.getStyle() + this.getHtml();this.writeIframe(content);},extend: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},getStyle: function () {var str = "",styles = document.querySelectorAll('style,link');for (var i = 0; i < styles.length; i++) {str += styles[i].outerHTML;}str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none!important;}</style>";str += "<style>html,body,div{height: auto!important;margin:0;padding:0}</style>";// str += "<style>html,body,div{height: auto!important;}</style>";return str;},getHtml: function () {var inputs = document.querySelectorAll('input');var textareas = document.querySelectorAll('textarea');var selects = document.querySelectorAll('select');var canvass = document.querySelectorAll('canvas');var isNeedRemove = document.querySelectorAll('.isNeedRemove')for (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 < selects.length; k3++) {console.log(isNeedRemove)if (selects[k3].type == 'select-one') {var child = selects[k3].children;for (var i in child) {if (child[i].tagName == 'OPTION') {if (child[i].selected == true) {child[i].setAttribute('selected', "selected")} else {child[i].removeAttribute('selected')}}}}}//canvass echars图表转为图片for (var k4 = 0; k4 < canvass.length; k4++) {if (isNeedRemove.length == 0) {var imageURL = canvass[k4].toDataURL("image/png");var img = document.createElement("img");img.src = imageURL;img.setAttribute('style', 'max-width: 100%;');img.className = 'isNeedRemove'canvass[k4].style.display = 'none'// canvass[k4].parentNode.style.width = '100%'// canvass[k4].parentNode.style.textAlign = 'center'canvass[k4].parentNode.insertBefore(img, canvass[k4].nextElementSibling);}}//做分页//style="page-break-after: always"// var pages = document.querySelectorAll('.result');// for (var k5 = 0; k5 < pages.length; k5++) {//   pages[k5].setAttribute('style', 'page-break-after: always');// }return this.dom.outerHTML;},writeIframe: function (content) {var w, doc, iframe = document.createElement('iframe'),f = document.body.appendChild(iframe);iframe.id = "myIframe";//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');w = f.contentWindow || f.contentDocument;doc = f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);doc.close();var _this = thisiframe.onload = function () {_this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)}, 100)}},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';}
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {// 4. 添加实例方法Vue.prototype.$print = Print
}
export default MyPlugin

在mian.js文件全局声明

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

3.在vue 页面中不打印地方，使用class=“no-print”,如第2点vue文件显示

vue 实现下载pdf、导出png、打印功能相关推荐

Vue实现PDF导出和打印功能
在Vue页面上实现PDF导出和打印功能依赖于两个npm插件,分别为vue-to-pdf和vue-easy-printer. 安装命令: npm i vue-to-pdf --save npm i vu ...
vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
vue中下载文件导出保存到本地
vue中下载文件导出保存到本地先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地看看返回数据 res.config.url 中是下载链接地 ...
Vue前端实现excel的导入、导出、打印功能
目录一.相关依赖下载二.excel导入功能三.table导出excel表格 1.导出行数据 2.导出table数据(也会导出合并单元格) 3.导出二维数据的table数据 4.导出合并单元格ta ...
Vue使用Print插件实现页面打印功能/打印列表
Vue使用Print插件实现页面打印示例官网地址可以下载最新版官网下载 npm 安装 npm install print-js --save npm安装时将库导入项目(main.js) imp ...
Vue中实现pdf文件预览功能
写在前面: 实现的功能就是点击预览按钮,弹出对话框在线预览pdf文件实现此功能的前提是需要在Vue项目中安装组件vue-pdf, 在终端命令行输入运行如下语句: npm install --save ...
下载PDF文件及打印PDF文件
一:下载PDF 如果单纯的用A标签设置download属性来下载是直接打开pdf文件的而不是下载. import { download } from './download'; /*** 下载PDF文 ...
java pdf预览打印_Android实现PDF预览打印功能
最近在做一个项目,需要用到android手机连接打印机进行打印的功能,目前在网上找到的教程介绍的都是蓝牙连接热敏打印机(pos机大小的打印机)和蓝牙打印机,如果连接日常所见到的网络打印机,进行打印,很 ...
vue 使用浏览器自带打印机打印功能
本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题. 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页 ...

vue 实现下载pdf、导出png、打印功能

1.下载PDF

2.导出png

3.vue打印

vue 实现下载pdf、导出png、打印功能相关推荐

最新文章

热门文章