angular2之pdf文件操作大全

最近的项目中需要显示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)，可指定文件名

实际代码如下：

import * as domtoimage from 'dom-to-image';

import * as jsPDF from 'jspdf';

window['jsPDF'] = jsPDF;

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文件的链接，如

"http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"

然后让我们把这个文件显示在页面上

1.首先安装两个包 pdfjs-dist （1.9.0）和 ng2-pdf-viewer （2.0.0），这两个版本亲测有效，更新版本可能会有bug，github地址如下

https://github.com/VadimDez/ng2-pdf-viewer

https://github.com/mozilla/pdf.js

2.import { PdfViewerComponent } from 'ng2-pdf-viewer'; 将这个包 import 到相关module里，不需要import pdfjs-dist ，因为这个包是ng2-pdf-viewer需要的，我们只要install了就好

3.最后一步直接加代码

<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种需求及解决方案，如果还有别的需求和更好的方案，欢迎交流~

转载于:https://www.cnblogs.com/BillyQin/p/7760596.html

angular2之pdf文件操作大全相关推荐

读取Java文件到byte数组的三种方式及Java文件操作大全(包括文件加密,String加密)
读取Java文件到byte数组的三种方式 package zs;import java.io.BufferedInputStream; import java.io.ByteArrayOutputSt ...
java中文件,java中文件操作大全
java中文件操作大全一.获得控制台用户输入的信息 view plaincopy to clipboardprint? / //获得控制台用户输入的信息 return throws ioexcept ...
C++Builder文件操作大全
C++Builder文件操作大全在编程的过程中,文件的操作是一个经常用到的问题,在C++Builder中,可以使用多种方法对文件操作,下面我就按以下几个部分对此作详细介绍,就是: 1.基于C的文件操 ...
python对PDF文件操作
python对PDF文件操作下载模块PyPDF2,以页为基本单位对PDF文件进行读写操作,无法直接操作每一页内容. PDF文件读操作导入函数 from PyPDF2 import PdfFileR ...
pypdf2 存储pdf_PyPDF2：用于PDF文件操作的Python库
pypdf2 存储pdf PyPDF2 is a pure-python library to work with PDF files. We can use the PyPDF2 module to ...
在线转换pdf和虚拟打印机生成pdf文件操作攻略
由于PDF具有稳定的格式和良好的视图,使得PDF格式文件越来越受工作族的欢迎.但大多人仍习惯Word编辑,所以就有了Word文档转换PDF的需求,那么有什么好的转换Word的方法呢? 小编就来介绍两种 ...
Python 办公自动化：全网最强最详细 PDF 文件操作手册！
PDF(Portable Document Format)是一种便携文档格式,便于跨操作系统传播文档.PDF文档遵循标准格式,因此存在很多可以操作PDF文档的工具,Python自然也不例外. 而Pyt ...
Java文件操作大全(包括文件加密,String加密)
1.创建文件夹 //import java.io.*; File myFolderPath = new File(%%1); try { if (!myFolderPath.exists()) myF ...
MATLAB下pdf文件操作读取示例
这里写目录标题摘要原文件预处理为txt 代码实现摘要当遇到一些需要大量数据的项目,数据的读取与储存显得尤为重要.怎样把数据从其他格式的文件中读取,并运用到程序中是很多时候我们要解决的问题.对 ...

angular2之pdf文件操作大全

angular2之pdf文件操作大全相关推荐

最新文章

热门文章