1)html2canvas 截图
npm install --save html2canvas
import html2canvas from 'html2canvas';
// 截图并回调方法
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
2)jspdf 生成导出pdf
npm install jspdf --save
import { jsPDF } from "jspdf";
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); // l:横向 p:纵向
pdf.addImage(image.data, 'JPEG', 0, isAddpage, imgX, imgHeight); // 将图像添加到PDF
pdf.save(`测试.pdf`);
参考代码
function convertCanvasToImage() {
html2canvas(document.getElementById('mEcharts'), {
onrendered: function(canvas) {
//document.body.appendChild(canvas);
createPDFObject(canvas.toDataURL("image/jpeg"));
}
});
}
function createPDFObject(imgData) {
debugger;
var name="柱状图";
var doc = new jsPDF('p', 'pt');
doc.addImage(imgData, 5, 5, 600, 300, 'img');
doc.save(''+name+'.pdf')
}
横向导出
// 截屏导出pdf
downloadPDF: function () { // 截图
html2canvas(document.querySelector('.kuang-bg')).then(canvas => {
// document.body.appendChild(canvas)
// canvas的宽度
var contentWidth = canvas.width
// console.log('canvas宽度:' + contentWidth) // canvas宽度:1546
// canvas的高度
var contentHeight = canvas.height
// console.log('canvas高度:' + contentHeight) // canvas高度:1647
// 一页pdf显示html页面生成的canvas高度;
// 已知cancas的尺寸,和pdf的比例,按照cancas的尺寸根据比例计算出page的高度
// a4纸的尺寸[595.28,841.89]
// contentWidth / pageHeight = 592.28 / 841.89
// a/b=a1/b1 b=a*b1/a1
// 1000*841.89/592.28=1421.4391841696495
// 1000/592.28*841.89=1421.4391841696495
// var pageHeight = contentWidth * 841.89 / 592.28
// 因为是横着打印,所以高度要反一反
var pageHeight = contentWidth * 592.28 / 841.89
// var pageHeight = contentWidth / 592.28 * 841.89
// console.log('一页pdf显示html页面生成的canvas高度:' + pageHeight) // 一页pdf显示html页面生成的canvas高度:2197.5449787262783
// 未生成pdf的html页面高度
var leftHeight = contentHeight
// console.log('未生成pdf的html页面高度:' + leftHeight) // 未生成pdf的html页面高度:1647
// 页面偏移
var position = 0
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
// var imgWidth = 595.28
// var imgHeight = 592.28 / contentWidth * contentHeight
// 横着打印,宽和高要对调一下
var imgWidth = 841.89
var imgHeight = 841.89 / contentWidth * contentHeight
// console.log('html页面生成的canvas在pdf中图片的高度:' + imgHeight)
this.createPDFObject(canvas.toDataURL('image/jpeg', 1.0), leftHeight, pageHeight, imgWidth, imgHeight, position)
})
},
createPDFObject: function (imgData, leftHeight, pageHeight, imgWidth, imgHeight, position) { // 导出FDF
// let height = this.$refs.top.offsetHeight // 高度
var doc = new JsPDF('l', 'pt') // 横着打印
// var doc = new JsPDF('', 'pt', 'a4') // 竖着打印
console.log('未生成pdf的html页面高度:' + leftHeight) // 未生成pdf的html页面高度:1647
console.log('一页pdf显示html页面生成的canvas高度:' + pageHeight) // 一页pdf显示html页面生成的canvas高度:
if (leftHeight < pageHeight) { // 没有超出一页
doc.addImage(imgData, 'jpeg', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 595.28
if (leftHeight > 0) {
doc.addPage()
}
}
}
let year = this.chartYear
let sMonth = this.chartMonth[0]
let eMonth = this.chartMonth[this.chartMonth.length - 1]
doc.save(year + '年' + sMonth + '至' + eMonth + '用电走势图.pdf')
},
竖向导出
// 截屏导出pdf
downloadPDF: function () { // 截图
html2canvas(document.querySelector('.kuang-bg')).then(canvas => {
// document.body.appendChild(canvas)
// canvas的宽度
var contentWidth = canvas.width
// console.log('canvas宽度:' + contentWidth) // canvas宽度:1546
// canvas的高度
var contentHeight = canvas.height
// console.log('canvas高度:' + contentHeight) // canvas高度:1647
// 一页pdf显示html页面生成的canvas高度;
// 已知cancas的尺寸,和pdf的比例,按照cancas的尺寸根据比例计算出page的高度
// a4纸的尺寸[595.28,841.89]
// contentWidth / pageHeight = 592.28 / 841.89
// a/b=a1/b1 b=a*b1/a1
// 1000*841.89/592.28=1421.4391841696495
// 1000/592.28*841.89=1421.4391841696495
// 竖版
var pageHeight = contentWidth * 841.89 / 592.28
// 因为是横着打印,所以高度要反一反
// var pageHeight = contentWidth * 592.28 / 841.89
// var pageHeight = contentWidth / 592.28 * 841.89
// console.log('一页pdf显示html页面生成的canvas高度:' + pageHeight) // 一页pdf显示html页面生成的canvas高度:2197.5449787262783
// 未生成pdf的html页面高度
var leftHeight = contentHeight
// console.log('未生成pdf的html页面高度:' + leftHeight) // 未生成pdf的html页面高度:1647
// 页面偏移
var position = 5
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
// 竖着打印
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight
// 横着打印,宽和高要对调一下
// var imgWidth = 841.89
// var imgHeight = 841.89 / contentWidth * contentHeight
// console.log('html页面生成的canvas在pdf中图片的高度:' + imgHeight)
this.createPDFObject(canvas.toDataURL('image/jpeg', 1.0), leftHeight, pageHeight, imgWidth, imgHeight, position)
})
},
createPDFObject: function (imgData, leftHeight, pageHeight, imgWidth, imgHeight, position) { // 导出FDF
// let height = this.$refs.top.offsetHeight // 高度
// var doc = new JsPDF('l', 'pt') // 横着打印
var doc = new JsPDF('', 'pt', 'a4') // 竖着打印
console.log('未生成pdf的html页面高度:' + leftHeight) // 未生成pdf的html页面高度:1647
console.log('一页pdf显示html页面生成的canvas高度:' + pageHeight) // 一页pdf显示html页面生成的canvas高度:
if (leftHeight < pageHeight) { // 没有超出一页
doc.addImage(imgData, 'jpeg', 5, 0, imgWidth, imgHeight) // x y width height
} else {
while (leftHeight > 0) {
doc.addImage(imgData, 'jpeg', 5, position, imgWidth, imgHeight)
leftHeight -= pageHeight
// position -= 595.28 // 横着打印
position -= 841.89 // 竖着打印
if (leftHeight > 0) {
doc.addPage()
}
}
}
let year = this.chartYear
let sMonth = this.chartMonth[0]
let eMonth = this.chartMonth[this.chartMonth.length - 1]
doc.save(year + '年' + sMonth + '至' + eMonth + '用电走势图.pdf')
},