vue前端實現(xiàn)打印下載示例詳解
更新時間：2022年08月15日 14:09:35 作者：搬磚小能手丶
這篇文章主要為大家介紹了vue前端實現(xiàn)打印下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
html2canvas介紹
分享一下幾個后臺管理系統(tǒng)比較常用的插件：下載、打印
html2canvas是在瀏覽器上對網頁進行截圖操作，實際上是操作DOM，這個插件也有好長時間了，比較穩(wěn)定，目前使用還沒有遇到什么bug
jspdf介紹
如果下載出來是pdf文件，可以加上jspdf插件，會先通過html2canvas把頁面轉化成base64圖片，再通過jspdf導出
安裝
npm i html2canvas jspdf 或 yarn add html2canvas jspdf
使用
<template>
<div>
<h1 ref="toPdf">
導出區(qū)域
</h1>
<button @click="toPdfFn">導出pdf</button>
</div>
</template>
<script>
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {
methods:{
toPdfFn(){
this.htmlToPdf('文件名','時間')
},
htmlToPdf(name,time){
let element = this.$refs.toPdf
html2canvas(element, {
logging: false
}).then(function(canvas) {
let pdf = new JSPDF("p", "mm", "a4") // A4紙，縱向
let ctx = canvas.getContext("2d")
let a4w = 190;
let a4h = 277 // A4大小，210mm x 297mm，四邊各保留20mm的邊距，顯示區(qū)域190x277
let imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4顯示比例換算一頁圖像的像素高度
let renderedHeight = 0
while (renderedHeight < canvas.height) {
let page = document.createElement("canvas")
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能內容不足一頁
// 用getImageData剪裁指定區(qū)域，并畫到前面創(chuàng)建的canvas對象中
page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight,
canvas.height - renderedHeight)), 0, 0)
pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height /
page.width)) // 添加圖像到頁面，保留10mm邊距
// 如果后面還有內容，添加一個空頁
renderedHeight += imgHeight
if (renderedHeight < canvas.height) {
pdf.addPage()
}
}
pdf.save(name + time)
})
}
}
}
</script>
注意點：
1、能使用ref來獲取html結構就用ref，盡量不使用id。如果使用的地方比較多可以掛載到vue實例上
2、導出的pdf空白情況：檢查dom結構有沒有獲取到，還有就是css樣式要寫在導出區(qū)域內的元素中
printjs介紹
之前是使用vue-print-nb插件的，但是這個插件有點貓病，有時候會出現(xiàn)樣式跨域的問題，有時候又正常，后面在GitHub上找到的一個，用到現(xiàn)在也沒出現(xiàn)過什么問題
在utils文件里面創(chuàng)建一個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;}</style>";
return str;
},
getHtml: function () {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select');
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++) {
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')
}
}
}
}
}
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 = this
iframe.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
printjs源碼在這里
在main.js中注冊
import Vue from "vue"; import print from "./src/utils/print.js"; Vue.use(print)
在需要的地方使用
<template>
<div>
<h1 ref="print">
<div>打印區(qū)域</div>
</h1>
<button @click="printFn">打印</button>
</div>
</template>
<script>
export default {
methods: {
printFn() {
//傳入dom結構即可
this.$print(this.$refs.print);
},
},
};
</script>
注意：需使用ref獲取dom節(jié)點，若直接通過id或class獲取則webpack打包部署后打印內容為空
指定不打印區(qū)域 方法
方法一. 添加no-print樣式類
<div class="no-print">不要打印我</div>
方法二. 自定義類名
<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用以上就是vue前端實現(xiàn)打印下載示例詳解的詳細內容，更多關于vue前端打印下載的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue 過濾器filters的實例代碼以及vue過濾器的基本用法,需要的朋友可以參考下2017-12-12
這篇文章主要給大家介紹了關于Vue中正確使用Element-UI組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了vue?props?type設置多個類型，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3項目中優(yōu)雅實現(xiàn)微信授權登錄的方法
用戶在微信端中訪問第三方網頁,可以通過微信網頁授權機制獲取用戶的基本信息,進而實現(xiàn)所需要的業(yè)務邏輯,這篇文章主要給大家介紹了關于Vue3項目中優(yōu)雅實現(xiàn)微信授權登錄的相關資料,需要的朋友可以參考下2021-09-09
vue-cil之axios的二次封裝與proxy反向代理使用說明
這篇文章主要介紹了vue-cil之axios的二次封裝與proxy反向代理使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue關于Element UI中的文本域換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
圖表在我們的項目中可以幫我們很明確的看到我們想要看到的數據，本文將主要介紹Echart圖表在項目中前后端使用的詳細教程，感興趣的同學可以學習一下2021-11-11
element el-tooltip動態(tài)顯示隱藏(有省略號顯示,沒有省略號不顯示)
本文主要介紹了element el-tooltip動態(tài)顯示隱藏,主要實現(xiàn)有省略號顯示,沒有省略號不顯示,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要為大家詳細介紹了vue項目中openlayers繪制行政區(qū)劃，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了el-table樹形表格表單驗證(列表生成序號)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05