一、先上效果用的是 html2canvas这个官方插件
上代码
主页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<style>
</style>
</head>
<body>
<div id="app">
<el-tag size="mini" style="cursor: pointer; text-align: center;" @click="screenshot">下载</el-tag> <br> <br>
<el-row>
<el-button>默认按钮</el-button> <br>
<el-button type="primary">主要按钮</el-button><br>
<el-button type="success">成功按钮</el-button><br>
<el-button type="info">信息按钮</el-button><br>
<el-button type="warning">警告按钮</el-button><br>
<el-button type="danger">危险按钮</el-button><br>
<el-button icon="el-icon-search" circle></el-button><br>
<el-button type="primary" icon="el-icon-edit" circle></el-button><br>
<el-button type="success" icon="el-icon-check" circle></el-button><br>
<el-button type="info" icon="el-icon-message" circle></el-button><br>
<el-button type="warning" icon="el-icon-star-off" circle></el-button><br>
<el-button type="danger" icon="el-icon-delete" circle></el-button><br>
<el-button plain>朴素按钮</el-button><br>
<el-button type="primary" plain>主要按钮</el-button><br>
<el-button type="success" plain>成功按钮</el-button><br>
<el-button type="info" plain>信息按钮</el-button><br>
<el-button type="warning" plain>警告按钮</el-button><br>
<el-button type="danger" plain>危险按钮</el-button><br><br>
<el-button round>圆角按钮</el-button><br>
<el-button type="primary" round>主要按钮</el-button><br>
<el-button type="success" round>成功按钮</el-button><br>
<el-button type="info" round>信息按钮</el-button><br>
<el-button type="warning" round>警告按钮</el-button><br>
<el-button type="danger" round>危险按钮</el-button><br>
</el-row>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 长截图 -->
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<!-- pdf文档使用-->
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/2.3.1/jspdf.es.min.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
};
},
methods: {
//长截图
screenshot() {
var that = this;
that.$confirm('是否长截屏?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
});
setTimeout(() => {
html2canvas(document.getElementById("app"), {
allowTaint: true,
taintTest: true,
useCORS: true,
onrendered: function (canvas) {
var url = canvas.toDataURL("image/png");
loading.close();
// that.uploadFile(url);
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 pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(url, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(url, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('导出名称' + (new Date()).getTime() + '.pdf'); //导出名称
}
});
}, 500);
}).catch(() => {
that.$message({
type: 'info',
message: '已取消'
});
});
},
},
});
</script>
</body>
</html>
综上就是把浏览器当前页面转换成 pdf格式，如有不懂留言为您解答
最后附上html2canvas官网地址： html2canvas.hertzen.com/
