vue实现页面中点击预览陈诉，实现将vue组件变成pdf文件进行弹窗展示 ...

一.实现效果

页面中点击预览陈诉，实现将vue组件变成pdf文件进行弹窗展示

定义的方法文件

1. import html2canvas from "html2canvas";
2. import jsPDF, { RGBAData } from "jspdf";
4. /** a4纸的尺寸[595.28,841.89], 单位毫米 */
5. const [PAGE_WIDTH, PAGE_HEIGHT] = [595.28, 841.89];
7. const PAPER_CONFIG: any = {
8.   /** 竖向 */
9.   portrait: {
10.     height: PAGE_HEIGHT,
11.     width: PAGE_WIDTH,
12.     contentWidth: 560,
13.   },
14.   /** 横向 */
15.   landscape: {
16.     height: PAGE_WIDTH,
17.     width: PAGE_HEIGHT,
18.     contentWidth: 800,
19.   },
20. };
22. // 将元素转化为canvas元素
23. // 通过 放大 提高清晰度
24. // width为内容宽度
25. async function toCanvas(element: HTMLElement, width: number) {
26.   if (!element) return { width, height: 0 };
28.   // canvas元素
29.   const canvas = await html2canvas(element, {
30.     allowTaint: true, // 允许渲染跨域图片
31.     scale: window.devicePixelRatio * 2, // 增加清晰度
32.     useCORS: true, // 允许跨域
33.   });
35.   // 获取canvas转化后的宽高
36.   const { width: canvasWidth, height: canvasHeight } = canvas;
38.   // html页面生成的canvas在pdf中的高度
39.   const height = (width / canvasWidth) * canvasHeight;
41.   // 转化成图片Data
42.   const canvasData = canvas.toDataURL("image/jpeg", 1.0);
44.   return { width, height, data: canvasData };
45. }
47. /**
48. * 生成pdf(A4多页pdf截断问题， 包括页眉、页脚 和 上下左右留空的护理)
49. * @param param0
50. * @returns
51. */
52. export async function outputPDF({
53.   /** pdf内容的dom元素 */
54.   element,
56.   /** 页脚dom元素 */
57.   footer,
59.   /** 页眉dom元素 */
60.   header,
62.   /** pdf文件名 */
63.   filename,
65.   /** a4值的方向: portrait or landscape */
66.   orientation = "portrait" as "portrait" | "landscape",
67. }: any) {
68.   if (!(element instanceof HTMLElement)) {
69.     return;
70.   }
72.   if (!["portrait", "landscape"].includes(orientation)) {
73.     return Promise.reject(
74.       new Error(
75.         `Invalid Parameters: the parameter {orientation} is assigned wrong value, you can only assign it with {portrait} or {landscape}`
76.       )
77.     );
78.   }
79.   const [A4_WIDTH, A4_HEIGHT] = [
80.     PAPER_CONFIG[orientation].width,
81.     PAPER_CONFIG[orientation].height,
82.   ];
84.   /** 一页pdf的内容宽度, 左右预设留白 */
85.   const { contentWidth } = PAPER_CONFIG[orientation];
87.   // eslint-disable-next-line new-cap
88.   const pdf = new jsPDF({
89.     unit: "pt",
90.     format: "a4",
91.     orientation,
92.   });
94.   // 一页的高度， 转换宽度为一页元素的宽度
95.   const { width, height, data } = await toCanvas(element, contentWidth);
97.   // 添加
98.   function addImage(
99.     _x: number,
100.     _y: number,
101.     pdfInstance: jsPDF,
102.     base_data:
103.       | string
104.       | HTMLImageElement
105.       | HTMLCanvasElement
106.       | Uint8Array
107.       | RGBAData,
108.     _width: number,
109.     _height: number
110.   ) {
111.     pdfInstance.addImage(base_data, "JPEG", _x, _y, _width, _height);
112.   }
114.   // 增加空白遮挡
115.   function addBlank(x: number, y: number, _width: number, _height: number) {
116.     pdf.setFillColor(255, 255, 255);
117.     pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), "F");
118.   }
120.   // 页脚元素 经过转换后在PDF页面的高度
121.   const { height: tFooterHeight, data: headerData } = footer
122.     ? await toCanvas(footer, contentWidth)
123.     : { height: 0, data: undefined };
125.   // 页眉元素 经过转换后在PDF的高度
126.   const { height: tHeaderHeight, data: footerData } = header
127.     ? await toCanvas(header, contentWidth)
128.     : { height: 0, data: undefined };
130.   // 添加页脚
131.   async function addHeader(_headerElement: HTMLElement) {
132.     headerData &&
133.       pdf.addImage(headerData, "JPEG", 0, 0, contentWidth, tHeaderHeight);
134.   }
136.   // 添加页眉
137.   async function addFooter(
138.     _pageNum: number,
139.     _now: number,
140.     _footerElement: HTMLElement
141.   ) {
142.     if (footerData) {
143.       pdf.addImage(
144.         footerData,
145.         "JPEG",
146.         0,
147.         A4_HEIGHT - tFooterHeight,
148.         contentWidth,
149.         tFooterHeight
150.       );
151.     }
152.   }
154.   // 距离PDF左边的距离，/ 2 表示居中
155.   const baseX = (A4_WIDTH - contentWidth) / 2; // 预留空间给左边
156.   // 距离PDF 页眉和页脚的间距， 留白留空
157.   const baseY = 15;
159.   // 除去页头、页眉、还有内容与两者之间的间距后 每页内容的实际高度
160.   const originalPageHeight =
161.     A4_HEIGHT - tFooterHeight - tHeaderHeight - 2 * baseY;
163.   // 元素在网页页面的宽度
164.   const elementWidth = element.offsetWidth;
166.   // PDF内容宽度 和 在HTML中宽度 的比， 用于将 元素在网页的高度 转化为 PDF内容内的高度， 将 元素距离网页顶部的高度  转化为 距离Canvas顶部的高度
167.   const rate = contentWidth / elementWidth;
169.   // 每一页的分页坐标， PDF高度， 初始值为根元素距离顶部的距离
170.   const pages = [rate * getElementTop(element)];
172.   // 获取该元素到页面顶部的高度(注意滑动scroll会影响高度)
173.   function getElementTop(contentElement: any) {
174.     if (contentElement.getBoundingClientRect) {
175.       const rect = contentElement.getBoundingClientRect() || {};
176.       const topDistance = rect.top;
178.       return topDistance;
179.     }
180.   }
182.   // 遍历正常的元素节点
183.   function traversingNodes(nodes: any) {
184.     for (const element of nodes) {
185.       const one = element;
187.       /** */
188.       /** 注意： 可以根据业务需求，判断其他场景的分页，本代码只判断表格的分页场景 */
189.       /** */
191.       // table的每一行元素也是深度终点
192.       const isTableRow =
193.         one.classList && one.classList.contains("ant4-table-row");
194.       // 需要判断跨页且内部存在跨页的元素
195.       const isDivideInside =
196.         one.classList && one.classList.contains("divide-inside");
197.       // 对需要处理分页的元素，计算是否跨界，若跨界，则直接将顶部位置作为分页位置，进行分页，且子元素不需要再进行判断
198.       const { offsetHeight } = one;
199.       // 计算出最终高度
200.       const offsetTop = getElementTop(one);
202.       // dom转换后距离顶部的高度
203.       // 转换成canvas高度
204.       const top = rate * offsetTop;
205.       const rateOffsetHeight = rate * offsetHeight;
207.       // 对于深度终点元素进行处理
208.       if (isTableRow || isDivideInside) {
209.         // dom高度转换成生成pdf的实际高度
210.         // 代码不考虑dom定位、边距、边框等因素，需在dom里自行考虑，如将box-sizing设置为border-box
211.         updateTablePos(rateOffsetHeight, top);
212.       }
213.       //  // 对于需要进行分页且内部存在需要分页（即不属于深度终点）的元素进行处理
214.       // 对于普通元素，则判断是否高度超过分页值，并且深入
215.       else {
216.         // 执行位置更新操作
217.         updateNormalElPos(top);
218.         // 遍历子节点
219.         traversingNodes(one.childNodes);
220.       }
221.       updatePos();
222.     }
223.   }
225.   // 普通元素更新位置的方法
226.   // 普通元素只需要考虑到是否到达了分页点，即当前距离顶部高度 - 上一个分页点的高度 大于 正常一页的高度，则需要载入分页点
227.   function updateNormalElPos(top: any) {
228.     if (
229.       top - (pages.length > 0 ? pages[pages.length - 1] : 0) >=
230.       originalPageHeight
231.     ) {
232.       pages.push(
233.         (pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight
234.       );
235.     }
236.   }
238.   // 可能跨页元素位置更新的方法
239.   // 需要考虑分页元素，则需要考虑两种情况
240.   // 1. 普通达顶情况，如上
241.   // 2. 当前距离顶部高度加上元素自身高度 大于 整页高度，则需要载入一个分页点
242.   function updateTablePos(eHeight: number, top: number) {
243.     // 如果高度已经超过当前页，则证明可以分页了
244.     if (
245.       top - (pages.length > 0 ? pages[pages.length - 1] : 0) >=
246.       originalPageHeight
247.     ) {
248.       pages.push(
249.         (pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight
250.       );
251.     }
252.     // 若 距离当前页顶部的高度 加上元素自身的高度 大于 一页内容的高度, 则证明元素跨页，将当前高度作为分页位置
253.     else if (
254.       top + eHeight - (pages.length > 0 ? pages[pages.length - 1] : 0) >
255.         originalPageHeight &&
256.       top !== (pages.length > 0 ? pages[pages.length - 1] : 0)
257.     ) {
258.       pages.push(top);
259.     }
260.   }
262.   // 深度遍历节点的方法
263.   traversingNodes(element.childNodes);
265.   function updatePos() {
266.     while (pages[pages.length - 1] + originalPageHeight < height) {
267.       pages.push(pages[pages.length - 1] + originalPageHeight);
268.     }
269.   }
271.   function dataURLtoFile(dataurl: any, filename: any) {
272.     var arr = dataurl.split(","),
273.       mime = arr[0].match(/:(.*?);/)[1],
274.       bstr = atob(arr[1]),
275.       n = bstr.length,
276.       u8arr = new Uint8Array(n);
277.     while (n--) {
278.       u8arr[n] = bstr.charCodeAt(n);
279.     }
280.     return new File([u8arr], filename, { type: mime });
281.   }
283.   // 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，
284.   // 所以要把它修正，让其值是以真实的打印元素顶部节点为准
285.   const newPages = pages.map((item) => item - pages[0]);
287.   // 根据分页位置 开始分页
288.   for (let i = 0; i < newPages.length; ++i) {
289.     // 根据分页位置新增图片
290.     addImage(
291.       baseX,
292.       baseY + tHeaderHeight - newPages[i],
293.       pdf,
294.       data!,
295.       width,
296.       height
297.     );
298.     // 将 内容 与 页眉之间留空留白的部分进行遮白处理
299.     addBlank(0, tHeaderHeight, A4_WIDTH, baseY);
300.     // 将 内容 与 页脚之间留空留白的部分进行遮白处理
301.     addBlank(0, A4_HEIGHT - baseY - tFooterHeight, A4_WIDTH, baseY);
302.     // 对于除最后一页外，对 内容 的多余部分进行遮白处理
303.     if (i < newPages.length - 1) {
304.       // 获取当前页面需要的内容部分高度
305.       const imageHeight = newPages[i + 1] - newPages[i];
306.       // 对多余的内容部分进行遮白
307.       addBlank(
308.         0,
309.         baseY + imageHeight + tHeaderHeight,
310.         A4_WIDTH,
311.         A4_HEIGHT - imageHeight
312.       );
313.     }
315.     // 添加页眉
316.     if (header) {
317.       await addHeader(header);
318.     }
320.     // 添加页脚
321.     if (footer) {
322.       await addFooter(newPages.length, i + 1, footer);
323.     }
325.     // 若不是最后一页，则分页
326.     if (i !== newPages.length - 1) {
327.       // 增加分页
328.       pdf.addPage();
329.     }
330.   }
331.   let pdfDataTemp = pdf.output("datauristring"); //获取base64Pdf
332.   let myfileTemp = dataURLtoFile(pdfDataTemp, "选址评测报告" + ".pdf"); //调用一下下面的转文件流函数
333.   pdf.save(filename);
334.   return {
335.     pdfDataTemp,
336.     myfileTemp,
337.   };
338. }
340. const htmlToPdf = {
341. async getPdf() {
342.     const element = document.querySelector(".pdf-panel");
343.     const { pdfDataTemp, myfileTemp }: any =await outputPDF({
344.       element,
345.       filename: `选址评测报告`,
346.       orientation: "portrait",
347.     });
348.     return {
349.       pdfBase64: pdfDataTemp,
350.       files: myfileTemp,
351.     };
352.   },
353. };
354. export default htmlToPdf;

复制代码

定义必要变成pdf的组件文件 ExportReportPDF .vue

1.   <div class="ctn">
2.     <div class="pdf-ctn">
3.       <div class="pdf-panel">
4.    
5.          需要生成pdf的内容
6.       </div>
7.     </div>
8.     <div>
9.     </div>
10.   </div>

复制代码

1. <style lang="scss" scoped>
2. .ctn {
3.   position: fixed;
4.   top: 0;
5.   left: 0;
6.   z-index: -1;
7.   overflow: scroll;
8.   position: relative;
9.   .pdf-ctn {
10.     width: 1300px;
11.     .pdf-panel {
12.       position: relative;
13.     }
14.   }
15. }
16. </style>

复制代码

引入到预览陈诉的页面中

1. import ExportReportPDF from "./exportReportPDF/index.vue";
2. import htmlToPdf from "./exportReportPDF/pdf-print.ts";

复制代码

利用，生成 fileUrl

1.   const getPdfObj :any= await htmlToPdf.getPdf();
2.       files.value = getPdfObj.files
3.     pdfBase64.value = getPdfObj.pdfBase64
4.     let blob = dataURLtoBlob(getPdfObj.pdfBase64)
5.     fileUrl.value = window.URL.createObjectURL(blob)

复制代码

在iframe利用

1. <iframe  width="90%" height="90%" :src="`${fileUrl}`"></iframe>

复制代码

题目点：

• 会出现 185ms Unable to clone canvas as it is tainted 题目导致白屏
  
• 生成的base64过大，iframe显示不出来
  

办理方法：
1.pdf方法进行将每一个生成一个图片canvas然后组合成为整体一个canvas
2.利用dataURLtoBlob和createObjectURL生成url显示到iframe上，不能直接用base64文件

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。