一、首先一个简单的方案，
直接把网页转成图片，然后再转成pdf，此方法较为简单！
1、下载组件，然后直接复制下面方法保存成
exportPdf.js
文件
npm install --save html2canvas //html页面转换成图片
npm install jspdf --save //把base64转换为PDF
import html2Canvas from 'html2canvas'
import { jsPDF } from "jspdf"
export default function getPdfExport(id, title = 'pdf') {
return new Promise((resolve, reject) => {
html2Canvas(document.querySelector(`#${id}`), {
allowTaint: 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)
// 转成pdf
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')
// 转成图片
let aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = pageData;
aLink.download = title + ".jpg";
// 触发点击-然后移除
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
// 返回
resolve('success')
}
2、页面内使用
<div id="pdfHtml" @click="handlePdf">...</div>
import getPdfExport from '@/utils/exportPdf'
handlePdf() {
this.pdfLoading = true
getPdfExport('pdfHtml', '标题').then(res => {
setTimeout(() => {
this.pdfLoading = false
this.$message.success('pdf 保存成功')
}, 1000)
}).catch(err => {
this.pdfLoading = false
this.$message.error('pdf 保存失败')
}
二、自定义写入
上面方法比较是图片导入的，而且设计到长图会导致截断问题，所以我们还可以自定义内容！
1、中文问题解决
自己写当然最蛋疼的是中文了，因为插件内置只有英文
2.1.1、下载
https://github.com/parallax/jsPDF
2.1.2、打开页面，拿本地字体生成js文件
打开
fontconverter/fontconverter.html
，把你本地字体上传
在
C:\Windows\Fonts
里面有很多中文字体，复制一个出来！
上传就会得到一个js文件！复制放到项目里面
2.1.3、引入字体文件
import '../../static/js/simhei-normal.js' // 引入刚得到的js文件
export function setJsPDF(id) {
const pdf = new jsPDF(
orientation: "P",//l 横向 p 纵向
unit: "px",//单位设置
hotfixes: [20],
format: 'a4',// 纸张大小 默认a4. 可选a0-a10 或者数组[宽,高][925.44, 357.5] 单位是px
putOnlyUsedFonts: true
pdf.setFont('simhei', 0); // 设置字体为你引入的字体
console.log(pdf.getFontList()) // 字体列表
pdf.text('哈哈哈134', 55, 180);
pdf.save('报表.pdf')
}
然后就可以了！
2、常见的一些操作
var doc = new jsPDF();
// 打印所有可用的字体
console.log(doc.getFontList());
// 设置字体（内置的几种字体都是不支持中文，中文字体需要自己添加）
doc.setFont("simhei");
// 设置字体大小
doc.setFontSize(20);
// 添加文字内容，左边距离和上边距离
doc.text('哈哈哈134', 55, 180);
// 添加图片（图片转成DataURL形式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQA...）
//左上距离，图片长宽
doc.addImage(images, 'PNG', 55, 55, 100, 100);
// 保存pdf
doc.save('报表.pdf')
3、表格问题
下载插件
cnpm install --save jspdf-autotable
doc.autoTable({
styles: {
font: 'simhei',
head: [['Name', 'Email', 'Country']],
body: [
['David', '[email protected]', 'Sweden'],
['Castille', '[email protected]', 'Spain'],
vue支持pdf写入导出和中文不显示问题！
vue中使用swiper pagination不生效双向绑定！
element-ui.common.js?aec5:2432 Uncaught TypeError: Cannot re
vscode预览README.md文件
el-avatar的列表 src 更新顺序后，头像不显示了
element 全局修改el-dialog点击遮罩关闭弹窗的默认设置
vscode开发配置jsconfig.json不起作用是怎么回事了？@标记找不到文件
