版权声明:本人原创,码字辛苦,整理代码更是辛苦,转发请说明原处https://blog.csdn.net/qq_37815596谢谢! https://blog.csdn.net/qq_37815596/article/details/89238772
一、最简单的方法:利用download属性
download属性内填值表示指定下载的文件名
<a href={Pig} download="details.jpeg">下载</a>
<a href={Pig} download>下载</a>
二、jspdf(比较简单,但是不能转化网页内的图片)
npm install jspdf --save
npm install react-dom --save
import React, { Component } from "react";
import "./App.css"
import { renderToString } from "react-dom/server";
import jsPDF from "jspdf";
class Prints extends Component {
render() {
return (
<div>
<p style={{fontSize:18,color:"purple"}}>Convert webpage to pdf format and download</p>
</div>
);
}
}
const print = () => {
const string = renderToString(<Prints />);
const pdf = new jsPDF("p", "mm", "a4",'JPEG', 0, 0, 100, 50);
pdf.fromHTML(string);
pdf.save("pdf");
};
class App extends Component {
render() {
return (
<div>
<Prints />
<button onClick={print}>print</button>
</div>
);
}
}
export default App;
三、html2canvas + jsPDF单页
import React, { Component } from "react";
import "./App.css"
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import Pig from "./pig.jpg"
class App extends Component {
download() {
html2canvas(document.body).then(function(canvas) {
//返回图片dataURL,参数:图片格式和清晰度(0-1)
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
pdf.save('medical-details.pdf');
});
}
render() {
return (
<div id="canvas">
<img src={Pig} alt ="img" style={{width:400,height:400}} />
<p style={{fontSize:28,color:"purple"}}>img</p>
<button onClick={() => this.download()}>Download Report</button>
</div>
);
}
}
export default App;
四、html2canvas + jsPDF分页
问题:
- 图片跨域:
html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用)
img标签增加 crossOrigin='anonymous'
图片服务器配置Access-Control-Allow-Origin 或使用代理
- svg不能显示
import React, { Component } from "react";
import "./App.css"
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import Pig from "./pig.jpg"
import canvg from "canvg"
import $ from 'jquery'
class App extends Component {
download() {
if (typeof html2canvas !== 'undefined') {
//以下是对svg的处理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = $("#canvas").find('svg');//divReport为需要截取成图片的dom的id
svgElem.each(function (index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML.trim();
var canvas = document.createElement('canvas');
canvg(canvas, svg);
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
html2canvas((document.body),
{
useCORS: true,
allowTaint: false,
scale: 2
})
.then(function (canvas) {
var pageData = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
var pdf = new jsPDF('', 'pt', 'a4');
//addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
pdf.save('medical-details.pdf');
});
}
}
render() {
return (
<div id="canvas">
<button onClick={() => this.download()}>Download Report</button>
<svg
width="100%"
height="100%"
id="svg_style"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 380 360"
>
<image xlinkHref={Pig} x="0" width="50%" height="50%" />
</svg>
</div>
);
}
}
export default App;
具体代码
html2canvas(document.body, {
useCORS: true,
// allowTaint: true,
logging: false,
scale: 2
}).then(function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = (contentWidth / 595.28) * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = (592.28 / contentWidth) * contentHeight;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF("", "pt", "a4");
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save("medical-details.pdf");
});
目前还在考虑一个比较实用的方法,等待demo上传
https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/
1.将当前页面内容转成pdf
2.然后下载