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年已经写了一篇这样的文章,写的非常好,所以我翻译成了中文,强烈推荐你阅 ...
随机推荐
- windows下使用批处理设置环境变量
1. 设置临时环境变量 set BAT_HOME=c:\bat 此命令只对当前窗口有效,批处理或cmd窗口一关闭,变量就恢复原来的值了. 2. 设置永久环境变量 方法一 setx BAT_HOME C ...
- 【python】详解numpy库与pandas库axis=0,axis= 1轴的用法
对数据进行操作时,经常需要在横轴方向或者数轴方向对数据进行操作,这时需要设定参数axis的值: axis = 0 代表对横轴操作,也就是第0轴: axis = 1 代表对纵轴操作,也就是第1轴: nu ...
- git对vue项目进行版本管理
生成本地仓库 步骤一:git init 步骤二:git add * 步骤三:git commit -m 'init team' 创建远程仓库 new responstory 复制关联代码的命令 将本地 ...
- 理解Mysql prepare预处理语句
MySQL 5.1对服务器一方的预制语句提供支持.如果您使用合适的客户端编程界面,则这种支持可以发挥在MySQL 4.1中实施的高效客户端/服务器二进制协议的优势.候选界面包括MySQL C API客 ...
- golang实现高阶函数之map
package main import "fmt" func iMap(num []int, f func(a int) int) []int{ var r []int for _ ...
- PHP中的几个随机数生成函数
PHP中的几个随机数生成函数 rand() 基于 libc 的随机种子发生器 mt_rand() 基于 Mersenne Twister 算法返回随机整数.它可以产生随机数值的平均速度比 libc 提 ...
- (蓝桥杯)第八届A组C/C++方格分割
#include<iostream> #include<memory.h> #include<stack> #include<string> #incl ...
- Ajax 请求之_请求类型详解
$.ajax({ url: "规定发送请求的 URL.默认是当前页面.", type: "post", // 请求类型,默认get // 在回调函数中,无需将j ...
- 创建broker配置
1.准备工作 ■ 创建oracle11g的primary和standby库,物理standby,最大性能模式 ■ DG_BROKER_START设置为TRUE 2.创建broker配置 DGMGRL& ...
- hdu 4971 多校10最大权闭合图
/* 很明显的最大权闭合图题 */ #include<stdio.h> #include<string.h> #include<queue> using names ...