vue2+html2canvas+js PDF实现试卷导出和打印功能

1.首先安装

import html2canvas from 'html2canvas';

import { jsPDF } from 'jspdf';

2.引入打印插件print.js

import Print from "@/assets/js/print";

Vue.use(Print)

// 打印类属性、方法定义
/* 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>";// str += "<style>html,body,div{height: auto!important;font-size:14px}</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 = 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

3.执行函数

 // loding等待toLoding() {this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});// 导出按钮显示状态this.pdfIsShowData = false;// 展开所有节点let activeNames = [];for (let i = 0; i < Object.keys(this.dataAll).length; i++) {activeNames.push((i));}this.activeNames = activeNames;// 展开所有子节点if (this.$refs.collapse && this.$refs.collapse.length > 0) {this.$refs.collapse.forEach((item, index) => {item.activeNames = ['0'];})}// 关闭滚动条this.isMaxHeight = false;},// 打印试卷printPaper() {// 等待节点全部展开this.toLoding();setTimeout(() => {this.$nextTick(() => {this.$print(this.$refs.printContent);setTimeout(() => {this.loading.close();this.pdfIsShowData = true;}, 1000)});}, 2000)},// 导出试卷exportPaper() {// 等待节点全部展开this.toLoding()setTimeout(() => {this.$nextTick(() => {// 获取目标元素const element = document.querySelector('.toPdf');// 使用 html2canvas 捕获快照html2canvas(element).then(canvas => {// 将 canvas 转换为图片数据const imgData = canvas.toDataURL('image/png');// 创建一个 jsPDF 实例const pdf = new jsPDF('p', 'mm', 'a4');const imgWidth = 210; // A4纸宽const pageHeight = 297; // A4纸高let imgHeight = canvas.height * imgWidth / canvas.width;let heightLeft = imgHeight;// 添加图像到 PDF 第一页let position = 0;pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pageHeight;// 如果内容超过一页，则添加更多页while (heightLeft >= 0) {position = heightLeft - imgHeight;pdf.addPage();pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pageHeight;}// 下载 PDF 文件pdf.save(`${this.testName}.pdf`);this.pdfIsShowData = truethis.loading.close();this.$message({message: '导出成功',type: 'success'});// 关闭滚动条this.isMaxHeight = false;}).catch(error => console.error('Error capturing the snapshot:', error));});}, 2000)},

4.样式问题

打印时候把所有字体颜色改为黑色

.toPdf-black * {color: #000 !important;
}

<div :class="{ 'toPdf': true, 'toPdf-black': !pdfIsShowData }" ref="printContent"