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),可指定文件名
实际代码如下:
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种需求及解决方案,如果还有别的需求和更好的方案,欢迎交流~
angular2之pdf文件操作大全的更多相关文章
- Java 文件操作大全
Java 文件操作大全 //1.创建文件夹 //import java.io.*; File myFolderPath = new File(str1); try { if (!myFolderPat ...
- Python文件操作大全
Python 编程文件操作大全 文件打开模式 打开模式 执行操作 'r' 以只读方式打开文件(默认) 'w' 以写入的方式打开文件,会覆盖已存在的文件 'x' 如果文件已经存在,使用此模式打开将引 ...
- 【整理】C#文件操作大全(SamWang)
[整理]C#文件操作大全(SamWang) 文件与文件夹操作主要用到以下几个类: 1.File类: 提供用于创建.复制.删除.移动和打开文件的静态方法,并协助创建 FileStream 对象. msd ...
- 强大的pdf文件操作小工具——PDFtk的小白用法 【转载】
转载出处https://www.cnblogs.com/basterdaidai/p/6204518.html 前言 作为程序员,大家都知道的,总是会被技术小白问各种跟编程没什么关系的硬件.软件问题. ...
- C# 文件操作大全
1.创建文件夹//using System.IO;Directory.CreateDirectory(%%1); 2.创建文件//using System.IO;File.Create(%%1); 3 ...
- 【转】c#文件操作大全(二)
61.文件夹移动到整合操作 FolderDialog aa = new FolderDialog(); aa.DisplayDialog(); if (aa ...
- [PDF] PDFOperation--C#PDF文件操作帮助类 (转载)
点击下载 PDFOperation.rar 这个类是关于PDFOperation的帮助类,主要是实现C#PDF的文件操作,具体实现功能如下1.构造函数2.私有字段3.设置字体4.设置页面大小5.实例化 ...
- Linux中shell文件操作大全
1.创建文件夹#!/bin/shmkdir -m 777 "%%1" 2.创建文件#!/bin/shtouch "%%1" 3.删除文件#!/bin/shrm ...
- go文件操作大全
参考Go官方库的文件操作分散在多个包中,比如os.ioutil包,我本来想写一篇总结性的Go文件操作的文章,却发现已经有人2015年已经写了一篇这样的文章,写的非常好,所以我翻译成了中文,强烈推荐你阅 ...
随机推荐
- haproxy故障处理
1. haproxy 在配置健康检查的时候,默认没有配置页面检查 ,通过端口状态来检测.后端IIS web服务开始可能 是一个站点,或者采用了基于域名的配置方式,导致目前站点停了,后端主机不能被hap ...
- cstringlist
CStringList类成员 构造 CStringList 构造一个空的CString对象列表 首/尾访问 GetHead 返回此列表(不能是空的)中头部的元素 GetTail 返回此列表(不能是 ...
- final关键字用法
Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量. final类不能被继承,没有子类,final类中的方法默认是final的. final方法 ...
- ES6 箭头函数this指向问题
var name = "window"; var person1 = { name: "person1", show1: function() { consol ...
- swift 再识枚举变量
// Use enum to create an enumeration. Like classes and all other named types, enumerations can have ...
- Windows压缩包安装MySQL
一.下载zip版本 下载网址(如果浏览器下载很慢可以使用迅雷) http://dev.mysql.com/downloads/mysql/ 二.解压将得到的文件放置到任意目录 如果解压后的文件里没有d ...
- 允许MS SqlServer远程连接
实际问题: 服务器192.168.0.103上的SQL Express数据库实例,局域网内其余机器的Sql Server Management Studio都无法连接. 在本机上,可以用“.\SqlE ...
- N天学习一个linux命令之ip
用途 show / manipulate routing, devices, policy routing and tunnels 用法 通用格式 ip [ OPTIONS ] OBJECT { CO ...
- keras与sklearn的结合使用
keras与sklearn的结合使用 新建 模板 Fly Time: 2017-4-14 引言 代码 引言 众所周知,keras目前没有提供交叉验证的功能,我们要向使用交叉验证,就需要与sklearn ...
- iOS 基础类解析 - NSData、NSMutableData
iOS 基础类解析 - NSData.NSMutableData 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致& ...