页面DOM导出PDF
Nginx设置允许跨域
代码语言：javascript复制location /static {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
index index.html;
root /data/wwwjarapi/8905xhkjfileapitest/;
}也就是在location下添加
代码语言：javascript复制add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';添加模块引用
第一个将页面html转换成图片
代码语言：javascript复制npm install html2canvas --save第二个将图片生成pdf
代码语言：javascript复制npm install jspdf --save未使用VUE
代码语言：javascript复制/* eslint-disable */
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
/**
* @param ele 要生成 pdf 的DOM元素（容器）
* @param padfName PDF文件生成后的文件名字
* */
function downloadPDF(ele, pdfName){
document.documentElement.scrollTop = 0;
html2canvas( ele, {
dpi: 300,
useCORS:true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
} ).then( (canvas)=>{
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.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 = 595.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', 左，上，宽度，高度)设置在pdf中显示；
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(pdfName);
})
}
export default {
downloadPDF
}注意
document.documentElement.scrollTop = 0;是为了解决外层页面滚动时获取的canvas偏移的问题
引用
代码语言：javascript复制import htmlToPdf from "@/assets/js/htmlToPdf";调用
代码语言：javascript复制htmlToPdf.downloadPDF(
document.querySelector("#myexport"),
"小明的试卷"
);使用VUE
代码语言：javascript复制import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (id,title) {
document.documentElement.scrollTop = 0;
html2Canvas(document.querySelector(`#${id}`), {
// allowTaint: true
useCORS:true//看情况选用上面还是下面的，
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
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(title '.pdf')
}
)
}
}
}main.js文件中添加如下代码：
代码语言：javascript复制import htmlToPdf from '@/utils/htmlToPdf'
Vue.use(htmlToPdf)然后就可以在要导出pdf文件组件里面添加 如下 代码即可导出
代码语言：javascript复制this.getPdf('resumeId',name)Canvas转图片下载
也可以使用html2canvas获取canvas后 转为图片下载
代码语言：javascript复制let url = canvas.toDataURL("image/png");
var oA = document.createElement("a");
oA.download = '';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
