Render PDF Using jsPDF and HTML2Canvas, and Attach in Email Using NodeMailer
来源： https://stackoverflow.com/questions/61754787/render-pdf-using-jspdf-and-html2canvas-and-attach-in-email-using-nodemailer
html2canvas
Vue PDF文件预览vue-pdf
最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https://github.com/FranckFreiburger/vue-pdf#readme 不过一般GitHub上的注释比较简洁,所以这里把自己实际使用的过程总结了一下,下面贴代码 本博客源码: https://github.com/shengbid/vue-demo 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 引用: npm install --save vue-pdf template代码: <template> <div class="pdf" v-show="fileType === 'pdf'"> <p class="arrow"> // 上一页 <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span> {{currentPage}} / {{pageCount}} // 下一页 <span @click="changePdfPage(1)" class="turn" :class="{grey:
html截图 viedo标签截图 上传图片到服务器 java代码保存图片（完整）
对Html标签截图代码(直接引入html2canvas.js文件) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> </head> <body> <div id="capture" style="background: coral"> <h2>this is <b>bold</b> <span style="color:red">red</span> </h2> </div> <input type="button" value="生成" onclick="goFun()" /> </body> <script type="text/javascript"> function goFun(){ setTimeout(function(){ html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) }); },1500) } </script> </html>
JSP页面导出PDF格式文件
JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 添加下载链接的点击事件 <script type="text/javascript"> var downPdf = document.getElementById("downLoad"); downPdf.onclick = function() { downPdf.parentNode.removeChild(downPdf); html2canvas(document.body, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; /
将HTML页面自动保存为PDF文件并上传的两种方式（一）-前端（react）方式
一、业务场景 公司的样本检测报告以React页面的形式生成，已调整为A4大小的样式并已实现分页，业务上需要将这个网页生成PDF文件，并上传到服务器，后续会将这个文件发送给客户（这里不考虑）。 二、原来的实现形式 浏览器原生方法： window.print()可以将网页保存为PDF文件 ，由于检测报告的网页已经调整为A4的样式，所以保存下来后即是一个标准的PDF文档，然后将保存下来的PDF文件上传到服务器，即可实现需求。 三、存在的问题 调用window.print()方法后 需要手动保存PDF到本地，然后手动上传到服务器。 所以本文的目的是点击上传PDF后 自动 将网页生成PDF，然后自动上传到服务器， 省略操作者手动保存、手动上传这两个步骤 。 四、解决方法 根据“自动”这个需求，找到了两种实现方式： 纯前端方式 ，前端生成pdf后通过接口上传到服务器 后端（node）方式 ，通过另起一个node服务来生成pdf并上传（ 推荐，以后介绍 ） 四、纯前端方法 前端采用了 React 框架。另需要 html2canvas , jspdf 两个库。 1、场景1-上传一个尚未打开的React页面，这种情况下需要将需要上传的页面通过iframe以visiblity：hidden的形式打开或者被遮挡在看不到的地方，不可以display：none
html2canvas wait for images to load
问题 I'm having this problem for some time ow and I can't seem to find a solution. I'm using the latest html2canvas js plugin to take a screenshot of chart made with flotcharts and then submit the base64 screenshot via a hidden input. The problem is the div with the chart also has some images and html2canvas return a base64 string before the images are loaded. I can put a setTimeout on the submit untill they are loaded but apparently chrome opens the page where I submitted as a popup (which is
JSP页面导出PDF格式文件
JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 添加下载链接的点击事件 <script type="text/javascript"> var downPdf = document.getElementById("downLoad"); downPdf.onclick = function() { downPdf.parentNode.removeChild(downPdf); html2canvas(document.body, { onrendered:function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; /
高质量前端快照方案：来自页面的「自拍」
作者 | ggvswild 原文 | https://juejin.im/post/5df2e8ab6fb9a0163770816d 背景 将网页保存为 图片 （以下简称为快照），是用户记录和分享页面信息的有效手段，在各种兴趣测试和营销推广等形式的活动页面中尤为常见。 快照环节通常处于页面交互流程的末端，汇总了用户最终的参与结果，直接影响到用户对于活动的完整体验。因此，生成高质量的页面快照，对于活动的传播和品牌的转化具有十分重要的意义。 本文基于云音乐往期优质活动的相关实践（例如「关于你的画」、「权力的游戏」和「你的使用说明书」等)，从快照的内容完整性、清晰度和转换效率等多个方面，讨论将网页转换为高质量图片的实践探索。 2. 适用场景 适用于将页面转为图片，特别是对实时性要求较高的场景。 希望在快照中展示跨域图片资源的场景。 针对生成图片内容不完整、模糊或者转换过程缓慢等问题，寻求有效解决方案的场景。 3. 原理简析 3.1 方案选型 依据图片是否由设备本地生成，快照可分为前端处理和后端处理两种方式。 由于后端生成的方案依赖于网络通信，不可避免地存在通信开销和等待时延，同时对于模板和数据结构变更也有一定的维护成本。 因此，出于实时性和灵活性等综合考虑，我们优先选用前端处理的方式。 3.2 基本原理 前端侧对于快照的处理过程，实质上是将 DOM 节点包含的视图信息转换为图片信息的过程
canvas 的 getImageData 和 toDataUrl 跨域问题
背景是这样的，母亲节的时候，我们有个需求就是用户可以长按或者点击一个按钮进行截图后去分享我们的活动，然而我们的图片例如头像，采用又拍云做 cdn 优化，所以意味着图片的链接跟主页面所在域名不一样，当需要需要对 canvas 图片进行 getImageData() 或 toDataURL() 操作的时候，跨域问题就出来了。 对于跨域的图片，只要能够在网页中正常显示出来，就可以使用 canvas 的 drawImage() API 绘制出来。但是如果你想更进一步，通过 getImageData() 方法获取图片的完整的像素信息，则多半会出错。 举例来说，使用下面代码获取 github 上的自己头像图片信息： var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var img = new Image(); img.onload = function () { context.drawImage(this, 0, 0); context.getImageData(0, 0, this.width, this.height); }; img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';'
html2canvas滚动轴问题、dom-to-image移动端兼容性问题汇总
项目要求是：html生成图片（图片格式不限），长按图片能够保存到本地，主要在移动端 1、初试html2canvas 最初选择的是html2canvas插件，将html转为canvas 再通过Canvas2Image，将canvas转为想要的图片 问题：只能截取一屏的内容，当出现滚动条时，不在滚动视区的部分不会被生成 2、换用dom-to-image 听从广大网友的建议，换用dom-to-image插件 该插件常用的是 toPng、toJpeg、toSvg 这三种方法 本人实测之后：toPng和toJpeg方法只在部分ios端有效，在ios8以上和android上（微信内置）存在兼容性问题 toSvg 能够顺利在各种机型上生成图片，但是无法长按保存，想来是svg格式在移动端的支持性不好 尝试使用 canvas.todataurl 将svg转换为png格式，发现在android端依旧存在兼容性问题 3、继续用回html2canvas 想到的解决方案是：将需要生成图片的长图按一定比例缩小，在一屏中生成图片 代码大致如下： img.style.transform = "scale(0.4)"; 兼容性问题真是前端一大烦心事。 来源： oschina 链接： https://my.oschina.net/u/4312590/blog/4301299