--- theme: yu highlight: agate --- ![封面.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c44a86f85a20404e81b3479e8ed6ed13~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=wSErU7YUwkEUSan03lyyFvQ439I%3D) # 需求交代最近我们项目组开发了个互联网采集的功能，也就是后端合理抓取了第三方的文章，数据结构大致如下： ```html

前端人

学好前端，走遍天下都不怕

``` 数据抓取到后，存储到数据库，然后前端请求接口获取到数据，直接在页面预览 ```html

``` ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2b32ea73542b43e09cad9ef5b1acb30d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=B%2FTLL4Eml504E5WvIA%2BenisDIzY%3D) 整个需求已经交代清楚 # 这个需求有点为难后端了前天，客户说要新增一个文章的pdf导出功能，但就是这么一个合情合理的需求，却把后端为难住了，原因是部分数据采集过来的结构可能是这样的： ```html

前端人

学好前端，走遍天下都不怕

前端强，前端狂，交互特效我称王！

JS 写得好，需求改不了！

React Vue 两手抓，高薪 offer 到你家！

浏览器里横着走， bug 见我都绕道！

Chrome 调试一声笑， IE 泪洒旧时光！

Git 提交不留情，版本回退我最行！ ``` 仔细的人就能发现问题了，很多html元素存在没有完整的闭合情况 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3c8fe968e3c248d69076afef5c63937c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=tWIlmU%2FfdbqCpmaXNKAjAXGPXdQ%3D) 但浏览器是强大的，丝毫不影响渲染效果，原来浏览器自动帮我们补全结构了 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bc56b06a3c0542ca83d019d9f52fca0e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=28X8b2p0apm1HJ5oMWkI6BjWdao%3D) 可后端处理这件事就没那么简单了，爬取到的数据也比我举例的要复杂的多，使用第三方插件将html转pdf时会识别标签异常等问题，因此程序会抛异常 # 来自后端的建议苦逼的后端折腾了很久，还是没折腾出来，终于他发现前端页面有个右键打印的功能，也就是： ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/070143a6e12543539d29c4caf08af5bc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=oiK4kxZNLV8eO9gJ0UyCRrGBKcQ%3D) 于是他说：浏览器这玩意整挺好啊，前端能不能研究研究，尝试从前端实现导出 # 那就研究研究我印象中，确实有个叫`vue-print-nb`的前端插件，可以实现这个功能但.......等等，这个插件仅仅是唤起打印的功能，我总不能真做成这样，让用户另存为pdf吧于是，只能另辟蹊径，终于我找到了这么个仓库：里面实现了dom元素导出pdf的功能 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4a81a9967b194a8186b99b1d27d1fc44~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=jWl5fMUYK3MLy0Nsk2UBUbL4X60%3D) ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/69b83ec298b1419f96a1d8fc14186e84~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=lxlESU%2BZ%2BauqhbksG5QEwncmJ08%3D) 效果很不错，技术用到了`jspdf`、`html2canvas`这两个第三方库，代码十分简单 ```js const downLoadPdfA4Single = () => { const pdfContaniner = document.querySelector('#pdfContaniner') html2canvas(pdfContaniner).then(canvas => { // 返回图片dataURL，参数：图片格式和清晰度(0-1) const pageData = canvas.toDataURL('image/jpeg', 1.0) // 方向纵向，尺寸ponits，纸张格式 a4 即 [595.28, 841.89] const A4Width = 595.28 const A4Height = 841.89 // A4纸宽 const pageHeight = A4Height >= A4Width * canvas.height / canvas.width ? A4Height : A4Width * canvas.height / canvas.width const pdf = new jsPDF('portrait', 'pt', [A4Width, pageHeight]) // addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩 pdf.addImage( pageData, 'JPEG', 0, 0, A4Width, A4Width * canvas.height / canvas.width, ) pdf.save('下载一页PDF（A4纸）.pdf') }) } ``` 技术流程大致就是： * dom -> canvas * canvas -> image * image -> pdf 似乎一切都将水到渠成了 # 困在眼前的难题这个技术栈，最核心的就是：必须要用到dom元素渲染如果你尝试将打印的元素设置样式： ```css display: none; ``` 或 ```css visibility: hidden; ``` 或 ```css opacity: 0; ``` 执行导出功能都将抛异常或者只能导出一个空白的pdf 这时候有人会问了：为什么要设置dom元素为不可见？试想一下，你做了一个导出功能，总不能让客户必须先打开页面等html渲染完后，再导出吧？客户的理想状态是：在列表的操作列里，有个导出按钮，点击就可以导出pdf了何况还需要实现批量勾选导出的功能，总不能程序控制，导出一个pdf就open一个窗口渲染html吧 # 寻找新方法此路不通，就只能重新寻找新的方向，不过也没费太多功夫，就找到了另外一个插件`html2pdf.js`解决了这事这插件用起来也极其简单 ```bash npm install html2pdf.js ``` ```html ``` 功能正常，似乎一切都完美 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e75e7378a5d64ea99d092e71268292a9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=sc7etJVA307UN1iulKG4TgPrwFU%3D) # 问题没有想的那么简单如果我们的`html`是纯文本元素，这程序跑起来没有任何问题，但我们抓取的信息都源于互联网，`html`结构怎么可能会这么简单？如果我们的`html`中包含图片信息，例如： ```js // 使用示例 let element = `

职业：前端

技能：唱、跳、rap

`; ``` 此时你会发现，导出来的pdf，图片占位处是个空白块 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fd8a77a6eaf14e1e9b7538de6946e692~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=tWOvsH2vGsRCTSqgIoiBT1KUHh0%3D) > 思考一下：类似案例中的图片加载方式，都是get方式的异步请求，而异步请求就会导致图片还没渲染完成，但导出的程序已经执行完成情况（最直接的观察方式就是，把这个元素放到浏览器上渲染，会发现图片也是过一会才慢慢加载完成的） > > 不过我不确定`html2pdf.js`这个插件是否会发起图片请求，但不管发不发起，导出的行为明显是在图片渲染前完成的，就导致了这个空白块的存在 # 问题分析完了，那就解决吧既然图片异步加载不行，那就使用图片同步加载吧不是吧，你问我：什么是图片同步加载？我也不晓得，这个词是我自己当下凭感觉造的，如有雷同，纯属巧合了那我理解的图片同步加载是什么意思呢？简单来说，就是将图片转成`Base64`，因为这种方式，即使说无网的情况也能正常加载图片，因此我凭感觉断定，这就是图片同步加载基于这个思路，我写了个demo ```html ``` 此时就大功告成啦！不过得提一句：图片的URL链接必须是同源或者允许跨越的，否则就会存在图片加载异常的问题 # 修复图片过大的问题部分图片的宽度会过大，导致图片加载不全的问题，这在预览的情况下也存在 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a0a0201a409b49fd8480013652220a52~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=VdOyrvGB2tgwg7HfZvgbhvz39tc%3D) 因为需要加上样式限定 ```css img { max-width: 100%; max-height: 100%; vertical-align: middle; height: auto !important; width: auto !important; margin: 10px 0; } ``` 这样就正常啦 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9dee06fec27741a7a5c98a1146fea851~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgaG93Y29kZQ==:q75.awebp?rk3s=f64ab15b&x-expires=1758446416&x-signature=hkmp%2BNn5emv0q8MvIzaThNX3kuk%3D) 故此需要在导出pdf前，给元素添加一个图片的样式限定 ```js element =`` + element; ``` 完整代码： ```html ``` # 3.31更新 ## 前端和后端联合解决方案评论区有位热心市民 [一名爱小惠的前端](https://juejin.cn/user/659362709247992)提到：就让后端做，你在前端渲染出来后，让它提供一个接口，你在把 innerHTML 发给它（浏览器自动补全了）基于这个思路，我尝试了前端补全html，提交到后端，后端则可顺利pdf流 // 使用示例，纯在标签闭合不完整的情况 let element = `

职业：前端

技能：唱、跳、rap

img { max-width: 100%; max-height: 100%; vertical-align: middle; height: auto !important; width: auto !important; margin: 10px 0; } ` + element; const tempDiv = document.createElement('div'); tempDiv.innerHTML = element; // 获取到完整的html结构，提交给后端处理 console.log(tempDiv.innerHTML); } ## 后端解决方案使用`com.itextpdf.html2pdf`解决 com.itextpdf html2pdf 5.0.2 闹腾一圈下来，原来后端也有自己的html2pdf库，不过这个库不需要将图片转成`base64`，但需要设置中文字体，不设置的话中文将解析异常 # 后话前天提的需求，昨天兜的底，今天写的文章记录这种问题，理应该后端处理，但后端和我吐槽过他处理起来的困难与问题，寻求前端帮助时，我也会积极配合。可在现实中，我遇过很多后端，死活不愿意配合前端，例如日期格式化、数据id类型bigint过大不字符化返回给前端等等，主打一个本着前端可以做就前端做的原则，说实在：属实下头前后端本应该就是相互打配合的关系，谁方便就行个方便，没必要僵持不下今天的分享就到此结束，如果你对技术/行业交流有兴趣，欢迎添加`howcoder`微信，邀你进群交流 # 往期精彩 [《你不了解的Grid布局》](https://juejin.cn/post/7467869746236571683) [《就你小子还不会 Grid布局是吧？》](https://juejin.cn/post/7459005223173554213) [《超硬核：从零到一部署指南》](https://juejin.cn/post/7452197534352031770) [《私活2年，我赚到了人生的第一桶金》](https://juejin.cn/post/7451168270878097434) [《接入AI后，开源项目瞬间有趣了😎》](https://juejin.cn/post/7431761042194055183) [《肝了两个月，我们无偿开源了》](https://juejin.cn/post/7380200984058839066) [《彻底不NG前端路由》](https://juejin.cn/post/7336014826336747520) [《vue项目部署自动检测更新》](https://juejin.cn/post/7246997498572619831) [《一个公告滚动播放功能引发的背后思考》](https://juejin.cn/post/7237295525707530295) [《前端值得学习的开源socket应用》](https://juejin.cn/post/7119498429117988872)