html,vue转换成PDF
1,先看html的，直接上代码
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#demo{
background-color: yellow;
width: 1000px;
height: 2000px;
/* margin: auto; */
}
.red{
background-color: red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="demo-container">
<div id="demo">
<div class="red"></div>
</div>
</div>
<button>
下载简历
</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script>
function download(){
window.scrollTo(0,0); //解决有滚动条的情况图片或者pdf展示不完全
var element = $("#demo"); // 这个dom元素是要导出pdf的div容器
var w = element.width(); // 获得该容器的宽
var h = element.height(); // 获得该容器的高
var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
var abs = 0;
var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
if(win_o>win_i){
abs = (win_o - win_i)/2; // 获得滚动条长度的一半
}
canvas.width = w * 2; // 将画布宽&&高放大两倍
canvas.height = h * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-offsetLeft-abs,-offsetTop);
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
html2canvas(element).then(function(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 = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL(\'image/jpeg\', 1.0);
console.log(pageData);
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(\'我的简历.pdf\');
})
}
$("button").click(function(){
download();
})
</script>
</html>
2，vue项目中使用
①先安装依赖
第一个.将页面html转换成图片npm install --save html2canvas
第二个.将图片生成pdf
npm install jspdf --save
②定义工具文件
/* eslint-disable *///不使用JQuery版的
import html2canvas from \'html2canvas\';
import JsPDF from \'jspdf\';
/**
* @param ele 要生成 pdf 的DOM元素（容器）
* @param padfName PDF文件生成后的文件名字
* */
function downloadPDF(ele, pdfName) {
window.scrollTo(0, 0);
let eleW = ele.offsetWidth;// 获得该容器的宽
let eleH = ele.offsetHeight;// 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
var abs = 0;
let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
if (win_out > win_in) {
// abs = (win_o - win_i)/2; // 获得滚动条长度的一半
abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
// console.log(a, \'新abs\');
}
canvas.width = eleW * 2; // 将画布宽&&高放大两倍
canvas.height = eleH * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
// html2canvas(element).then( (canvas)=>{ //报错
// html2canvas(element[0]).then( (canvas)=>{
html2canvas(ele, {
dpi: 300,
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
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);
// pdf.addImage(pageData, \'JPEG\', 20, 40, 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);
})
}
async function previewImg(ele) { // 返回图片base64格式
window.scrollTo(0, 0);
let eleW = ele.offsetWidth;// 获得该容器的宽
let eleH = ele.offsetHeight;// 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
var abs = 0;
let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
if (win_out > win_in) {
abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
}
canvas.width = eleW * 2;
canvas.height = eleH * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
var baseSrc = \'\'
await html2canvas(ele, { //等待函数执行完成
dpi: 300,
useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
}).then((canvas) => {
var pageData = canvas.toDataURL(\'image/jpeg\', 1.0);
baseSrc = pageData
})
return baseSrc;
}
export default {
downloadPDF,
previewImg
}
③在项目中使用
<div style="padding: 10px;"><el-button type="primary" @click="handlePreview()">预览</el-button>
<el-button type="primary" @click="handleDown()">下载</el-button>
</div>
import htmlToPdf from \'@/assets/js/toPdf\'
export default { methods: { handleDown () {
htmlToPdf.downloadPDF(document.querySelector(\'#demo\'), \'离职申请表\')
},
handlePreview () {
htmlToPdf.previewImg(document.querySelector(\'#demo\')).then( res => {
this.previewUrl = res
})
}}
}
以上是 html,vue转换成PDF 的全部内容， 来源链接： utcz.com/z/379529.html
