【项目问题】前端如何实现打印和导出的功能？
打印和导出功能的实现
- 一、前言
- 二、准备工作
- 三、打印步骤
- 四、导出步骤
一、前言
打印需要用到的工具是
print-js。
导出需要用到的工具是jspdf。
二、准备工作
第一步：引入print-js 和 jspdf
npm i print-js
npm i jspdf
第二步：创建一个打印页面的组件
ng 是 angular/cli 脚手架快捷命令
ng g c pages/print
第三步：设计页面
<div id="print"><p>print contentp>
div>
<br>
<button (click)="print()">打印button>
<button (click)="export()">导出button>
三、打印步骤
1：创建css文件，设计最终打印的样式
assets/style/print.css
#print{display: flex;align-items: flex-start;justify-content: flex-end;padding: 20px;height: 200px;border: 1px black dotted;
}
2：引入print-js，实现打印
import * as printJS from 'print-js';
print(){printJS({printable: document.getElementById("print"), //打印的节点type: "html", //打印类型，html,json,imagecss: '/assets/style/print.css', //打印cssscanStyles: true //是否获取html的样式})}
效果：
四、导出步骤
1：引入html2Canvas 和 JsPDF
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
2：实现导出
export() {var printDom = document.getElementById('print');//获取打印的节点let opts: any = {useCORS: true, // 表示允许跨越的图片；allowTaint: true和useCORS: true选择一个// windowHeight: modal.scrollHeight + 24 + 100,//获取y方向页面包含滚动条的高度，24和100为padding,margin// width: dom.offsetWidth + 48,//48为padding值// height: dom.clientHeight + 400,//可见高度+padding+margin// y: window.pageYOffset + 100,//滚动条高度修复// scrollX: 17,scale: 1};//html2Canvas的作用是根据dom生成屏幕截图html2Canvas(printDom, opts).then(canvas => {let contentWidth = canvas.width;let contentHeight = canvas.height;let pageHeight = contentWidth / 592.28 * 841.89;let leftHeight = contentHeight;let position = 0;let imgWidth = 595.28;let imgHeight = 592.28 / contentWidth * contentHeight;let pageData = canvas.toDataURL('image/jpeg', 1.0);// landscape表示横向,portrait表示纵向let PDF = new JsPDF('portrait', 'pt', 'a4');//纵向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(`导出内容.pdf`);})}
效果：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！