一、业务场景

  公司的样本检测报告以React页面的形式生成,已调整为A4大小的样式并已实现分页,业务上需要将这个网页生成PDF文件,并上传到服务器,后续会将这个文件发送给客户(这里不考虑)。

二、原来的实现形式

  浏览器原生方法:window.print()可以将网页保存为PDF文件,由于检测报告的网页已经调整为A4的样式,所以保存下来后即是一个标准的PDF文档,然后将保存下来的PDF文件上传到服务器,即可实现需求。

三、存在的问题

  调用window.print()方法后需要手动保存PDF到本地,然后手动上传到服务器。所以本文的目的是点击上传PDF后自动将网页生成PDF,然后自动上传到服务器,省略操作者手动保存、手动上传这两个步骤。

四、解决方法

  根据“自动”这个需求,找到了两种实现方式:

  1. 纯前端方式,前端生成pdf后通过接口上传到服务器
  2. 后端(node)方式,通过另起一个node服务来生成pdf并上传(推荐,以后介绍)

四、纯前端方法

  前端采用了React框架。另需要html2canvas,jspdf两个库。

  1、场景1-上传一个尚未打开的React页面,这种情况下需要将需要上传的页面通过iframe以visiblity:hidden的形式打开或者被遮挡在看不到的地方,不可以display:none,因为这样获取到的DOM元素样式不正确,html2canvas会表现不正常。

  由于流程较多,直接见代码吧,说明见注释:

// 生成或者获取报告页面的外部容器
const getIframeContainer = () => {
const ic = document.getElementById("iframeContainer");
if (!ic) {
const iframeContainer = document.createElement("div");
iframeContainer.id = "iframeContainer";
iframeContainer.style.visibility = "hidden";
document.body.appendChild(iframeContainer);
return iframeContainer;
}
return ic;
}; class SendModal extends React.Component {
// ... // 点击开始上传
handleUpload = () => {
// 获取iframe容器和这个报告的ID
const iframeContainer = getIframeContainer();
const iframeId = `iframe_${this.state.id}`; // iframe的load事件回调,执行该回调后开始执行this.createAndUpload()
const onloadCallback = () => {
this.createAndUpload(iframeId).then(
// resolve和reject后移除报告iframe
() => {
ReactDOM.unmountComponentAtNode(iframeContainer);
},
errMsg => {
ReactDOM.unmountComponentAtNode(iframeContainer);
console.error(errMsg);
}
);
}; // 开始渲染报告的iframe
ReactDOM.render(
<ReportIframe
id={iframeId}
src={reportURL}
onLoad={onloadCallback}
key={iframeId}
/>,
iframeContainer
);
}; createAndUpload = iframeId => {
return new Promise((resolve, reject) => {
// 从iframe中获取需要保存为PDF的DOM元素
let pages = Array.from(
document
.getElementById(iframeId)
.contentDocument.querySelectorAll(".pdfpage")
);
console.log(pages);
const pagesLen = pages.length;
if (!pagesLen) {
reject("打开报告失败!");
} // 初始化一个pdf待用
const doc = new jsPDF("p", "mm", "a4");
const imgArr = [];
console.log("成功抓取pages");
// 将每个元素作为一个页面处理
pages.forEach((page, idx) => {
console.log(`正在绘制canvas[${idx}]`);
html2canvas(page, {
scale: 2,
logging: false,
useCORS: true,
imageTimeout: 60000
}).then(canvas => {
// canvas保存为图片
let imgData = canvas.toDataURL("image/jpeg", 1.0);
imgArr.push({ index: idx, value: imgData });
if (imgArr.length === pagesLen) {
console.log("canvas绘制完成,正在生成pdf");
// 通过idx保证页面顺序
let sortedArr = imgArr.sort((a, b) => a.index - b.index);
sortedArr = sortedArr.map(item => item.value);
sortedArr.forEach((img, idx) => {
// 将图片放入pdf文件中
if (idx > 0) {
doc.addPage();
}
doc.addImage(img, "JPEG", 0, 0, 210, 297);
if (idx + 1 === pagesLen) {
// 全部放入pdf文件后,保存并上传
const pdf = doc.output("blob");
console.log("成功生成pdf,正在上传"); const formData = new FormData();
formData.append("file", pdf);
fetch(`uploadURL`, {
method: "post",
body: formData
})
.then(response => response.json())
.then(resp => {
if (resp.Status === 0) {
console.log("上传成功");
resolve("success");
} else {
console.log("上传失败");
reject("上传报告失败!");
}
});
}
});
}
});
});
});
}; // ...
} class ReportIframe extends React.Component {
// React通过js渲染页面,所以iframe触发onload后可能页面是一个空白页面,所以通过getPages方法确保React渲染完成后出发onLoad回调
getPages = (e, times = 1) => {
const pages = Array.from(
this.iframe.contentDocument.querySelectorAll(".pdfpage")
);
if (pages.length || times >= 5) {
this.props.onLoad();
this.iframe.removeEventListener("load", this.getPages);
} else {
setTimeout(() => {
times++;
this.getPages(e, times);
}, 1000);
}
};
componentDidMount() {
this.iframe.addEventListener("load", this.getPages, false);
}
render() {
return (
<iframe
id={this.props.id}
src={this.props.src}
ref={node => (this.iframe = node)}
/>
);
}
}

  2、场景2-在已打开页面中生成pdf并上传,代码同上,直接执行createAndUpload即可,不考虑iframe的相关处理。

五、效果演示

  首先在报告列表页点击发送按钮,将进入待发送页面:

  

  ↑点击确认发送将会以iframe的形式自动打开页面并保存为pdf上传到服务器然后发送到客户。

  

  ↑生成的iframe元素

  

  ↑上传流程    

六、遇到的坑及说明

  1、生成的pdf模糊

  html2canvas设置scale:2可解决,即使用2倍图保证清晰度。

  2、页面中每页的顺序已排好,但是生成pdf后乱了

  由于canvas生成图片这个过程是异步的,所以我没有直接将生成的图片插入pdf中,而是通过idx排序后统一插入pdf。

  3、图片跨域

  公司使用的阿里云OSS,所以将图片设置了Access-Control-Allow-Origin:*即可解决,如果是外部图片,需要使用代理,具体使用见html2canvas相关文档。

  4、页面中有虚线,但是html2canvas生成的是实线

  见我之前的文章

  5、新建iframe后getPages作用是什么

  React通过js渲染页面,所以iframe触发onload后可能页面是一个空白页面,所以通过getPages方法确保React渲染完成后出发onLoad回调

七、前端生成PDF总结

  前端生成pdf并上传的流程:获取将要作为PDF页面的DOM元素 -> 将DOM元素生成canvas -> 将canvas转为图片 -> 将图片插入pdf中 -> 将pdf上传

  由于是通过转成图片生成的PDF,即使是2倍图,清晰度依然不如原生PDF,且无法选择文字,所以这种方式生成PDF并不是最优解。

  可能写的比较乱,可能属于自己知道咋回事但是说不出来那种……        

将HTML页面自动保存为PDF文件并上传的两种方式(一)-前端(react)方式的更多相关文章

  1. curl文件上传有两种方式,一种是post_fileds,一种是infile

    curl文件上传有两种方式,一种是POSTFIELDS,一种是INFILE,POSTFIELDS传递@实际地址,INFILE传递文件流句柄! );curl_setopt($ch, CURLOPT_PO ...

  2. 利用Selenium实现图片文件上传的两种方式介绍

    在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...

  3. SpringBoot从入门到精通十一(SpringBoot文件上传的两种方法)

    前言 在企业级项目开发过程中,上传文件是最常用到的功能.SpringBoot集成了SpringMVC,当然上传文件的方式跟SpringMVC没有什么出入. 本章目标 使用SpringBoot项目完成单 ...

  4. C#实现Web文件上传的两种方法

    1. C#实现Web文件的上传 在Web编程中,我们常需要把一些本地文件上传到Web服务器上,上传后,用户可以通过浏览器方便地浏览这些文件,应用十分广泛. 那么使用C#如何实现文件上传的功能呢?下面笔 ...

  5. linux 下文件上传的两种工具(XFTP5和Putty之pscp)方式

    一.使用XFTP(,需要先在LINUX上安装启用FTP服务) 然后,在WINDOWS上启动XFPT6客户端,将下载的文件上传至LINUX 指定目录: 二.使用PUTTY软件安装目录下的PSCP命令 1 ...

  6. ASP.NET Core 1.0中实现文件上传的两种方式(提交表单和采用AJAX)

    Bipin Joshi (http://www.binaryintellect.net/articles/f1cee257-378a-42c1-9f2f-075a3aed1d98.aspx) Uplo ...

  7. Html代码保存为Pdf文件

    前段时间Insus.NET有实现了<上传Text文档并转换为PDF>http://www.cnblogs.com/insus/p/4313092.html 和<截取视图某一段另存为部 ...

  8. 使用HttpClient实现文件的上传下载

    1 HTTP HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源. 虽然在 JDK 的 java.net ...

  9. web.config文件中配置数据库连接的两种方式

    web.config文件中配置数据库连接的两种方式 标签: 数据库webconfig 2015-04-28 18:18 31590人阅读 评论(1)收藏举报    分类: 数据库(74)  在网站开发 ...

随机推荐

  1. C#zip压缩类

    改造了网上的代码,可以压缩文件夹.指定文件列表(文件和文件夹的混合列表,需要指定子文件夹下需要压缩的文件),注释很详细不做解释 public class ZipHelper { /// <sum ...

  2. 对称加密AES

    static void Main(string[] args) { //string str = "rqiJI7eEICT+YZmScpAdbjzLnA4mgL3uU5uHXLBeaE6s8 ...

  3. linux 下zip的用法实例

    zip命令可以用来将文件压缩成为常用的zip格式.unzip命令则用来解压缩zip文件. 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip -r yasuo ...

  4. JavaScript中的注释问题详解? 部分3

    注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...

  5. 使用Json封装scroll,已处理其兼容性问题

    scroll.js /* 使用Json封装scroll */ function scroll(){ //标准模式(遵循W3C标准) if(pageYOffset!==null){ return { t ...

  6. CSS Modules 与 scoped 的不一样

    What ? css 的作用域表现. Css modules 是一个CSS文件,其中所有类名和动画名称默认为局部作用域. 使用JS编译原生的CSS文件,使其具备模块化的能力,该文件需要import使用 ...

  7. 【翻译】ES6生成器简介

    原文地址:http://davidwalsh.name/es6-generators ES6生成器全部文章: The Basics Of ES6 Generators Diving Deeper Wi ...

  8. SpringBoot2.0应用(四):SpringBoot2.0之spring-data-jpa

    如何整合spring data jpa 1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...

  9. leetcode — n-queens

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  10. 【Apache Kafka】Kafka学习笔记

    0x00 基本信息 1.Kafka架构图 2.环境信息 服务器IP:xx.xx.xx.xx 操作系统:CentOS7.2_x64 Kafka版本:kafka_2.12-1.1.0 Zookeeper版 ...