import domtoimage from 'dom-to-image';
import JsPDF from 'jspdf';
import {getTimeInfo} from "./publicMethods";
import {Message} from "element-ui";
export default class HtmlToPdfOrImg {
/**
* 下载html至pdf
* @param ele htmlID名称
* @param fileName 文件名称(不传会默认生成)
*/
static downloadPDF(ele, fileName = '') {
const dom = document.getElementById(ele);
domtoimage.toJpeg(dom, {})
.then((dataURL) => {
const img = document.createElement('img');
const contentWidth = dom.clientWidth;
const contentHeight = dom.clientHeight;
img.src = dataURL;
//一页pdf显示html页面生成的canvas高度;
const pageHeight = contentWidth / 595.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = 595.28 / contentWidth * contentHeight;
const pdf = new JsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
pdf.addImage(img, 'JPEG', 0, 0, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分页
while (leftHeight > 10) {
pdf.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 10) {
pdf.addPage();
}
}
}
const {year, mouth, day, hours, minutes, seconds} = getTimeInfo();
//可动态生成
pdf.save(fileName || `${year}年${mouth}月${day}日${hours}时${minutes}分${seconds}秒_${parseInt((Math.random()) * 1000000)}`);
})
.catch(function (error) {
Message.error('附件下载失败')
});
}
/***
* html转的图片
* @param dom htmlID名称
* @param fileName 文件名称(不传会默认生成)
*/
static previewImg(dom, fileName = '') {
domtoimage.toJpeg(document.getElementById(dom), {})
.then((dataUrl) => {
const link = document.createElement('a');
link.href = dataUrl;
const {year, mouth, day, hours, minutes, seconds} = getTimeInfo();
link.download = `${fileName || `${year}年${mouth}月${day}日${hours}时${minutes}分${seconds}秒_${parseInt((Math.random()) * 1000000)}`}.jpg`;
document.body.style.height = '100%';
link.click()
})
.catch(function (error) {
Message.error('图片下载失败')
});
}
}
html转下载图片
<div @click="previewImg('htmlID','文件名称,可不传自动生成')"></div>
html转下载pdf
<div @click="downloadPDF('htmlID','文件名称,可不传自动生成')"></div>
依赖:
yarn add dom-to-image 或 npm install dom-to-image
yarn add jspdf 或 npm install jspdf