标签：pad monk top 单位 配置 monkey 文件名 url das
最近的项目中需要显示pdf内容、下载pdf、甚至是前端生成pdf
适用于angular2、4或者更高版本
情景1.需要将页面的某个部分转成pdf文件并下载（即将页面的部分html内容转成pdf文件）
方案：
1.首先借助 html-to-image 将所需html内容转成图片，即
domtoimage.toJpeg(dom，params)
2.借助jspdf将图片转换成pdf,即pdf.addImage()这个方法，
然而这里有个坑！！！前端这里显示图片的单位是px,但是生成的pdf是按mm来计算的,像A4纸尺寸是210mm×297mm，所以这里需要做像素与毫米的转换 ，否则生成的pdf里的图片不清晰
转换还需要知道另一个参数：DPI（每英寸多少点），一般来说300DPI足够
一般来说 300DPI就足够了
象素数 / DPI = 英寸数
英寸数 * 25.4 = 毫米数，所以这里就需要你根据实际情况 计算出你这个图片的长宽 包括里面的字的大小
3.将pdf下载到用户本地，即 pdf.save(name)，可指定文件名
实际代码如下：let hideNode = document.getElementById(id).cloneNode(true); document.getElementById(id).parentElement.appendChild(hideNode); this.render.addClass(hideNode,‘consulting-report-download‘); domtoimage.toJpeg(hideNode, { quality: 1.0, bgcolor:‘#fff‘, style: { ‘opacity‘:‘1‘, ‘top‘:‘0‘, ‘left‘: ‘0‘ } }) .then(function (dataUrl) { let img = new Image(); img.src = dataUrl; img.onload = function() { let pdf = new jsPDF(); pdf.addImage(dataUrl, ‘JPEG‘, 14, 10, img.width/12, img.height/12 );//300DPI 1mm=12px pdf.save(`${name}.pdf`); } }) .then(()=>{ this.downReport = false; });
情景2.需要将pdf文件的内容显示在网页上
方案：
这里又分两种情况 ，
一种是后端直接给你一个pdf文件的链接，如
<pdf-viewer [src]="pdfSrc" [page]="page" [original-size]="true" style="display: block;" ></pdf-viewer>
src就是后端给你的链接，page就是页数，还需要配置别的可以去github看看，这个pad-viewer是按将pdf竖向顺序显示，刚好符合产品的需求，所以这里我没有深入
还有一种情况是 用户直接上传pdf,然后需要将用户上传的pdf的内容显示在网页上
这里就需要用到HTML5 里面的 FileReader获取pdfSrc，
然后还是用到上面的<pdf-viewer>
let $img: any = document.querySelector(‘#file‘); if (typeof (FileReader) !== ‘undefined‘) { let reader = new FileReader(); reader.onload = (e: any) => { this.pdfSrc = e.target.result; }; reader.readAsArrayBuffer($img.files[0]); }
情景3.直接下载pdf文件
方案：
1.window.open（url）
2.location.href = url
说实话，感觉有点low,如果您有更好的方案，希望可以互相交流
关于angular2及以上操作pdf的3种需求及解决方案，如果还有别的需求和更好的方案，欢迎交流~
标签：pad monk top 单位 配置 monkey 文件名 url das
原文地址：http://www.cnblogs.com/BillyQin/p/7760596.html
