一.使用html2canvas获取页面元素并绘制成图片
npm install --save html2canvas
<template>
<div>
<button @click="uploadImg">上传</button>
<div ref="yourDom">
<!-- ...图片中页面内容 -->
<img src="@/assets/logo/logo.png" alt="" />
</div>
</div>
</template>
import html2canvas from 'html2canvas';
//base64转file
base64ToFile(dataURL, filename) {
let arr = dataURL?.split?.(',');
let youType = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename + '.' + youType.split('/')[1], { type: youType });
},
//点击上传按钮
uploadImg() {
html2canvas(this.$refs.yourDom, {
allowTaint: true, //是否允许不同源的图片污染画布
useCORS: true, //是否尝试使用 CORS 从服务器加载图片
scale: 2, //用于渲染的比例,默认为浏览器设备像素比率。
}).then(canvas => {
// canvas.toDataURL(type, encoderOptions) 是 JavaScript 中用于将 <canvas> 元素的内容转换为数据 URL 的方法
// type:指定输出的图像类型,默认为 "image/png"。也可以是 "image/jpeg" 或 "image/webp" 等格式。
// encoderOptions:用于指定图像编码质量或压缩级别的参数(取值范围为 0-1),仅适用于 "image/jpeg" 和 "image/webp" 格式。
let imgBase64Url = canvas.toDataURL('image/jpeg', 1);
let imgFile = this.base64ToFile(imgBase64Url, '图片名称');
console.log('🚀 ~ canvasImg ~ imgFile:', imgFile);
//你的上传接口方法
//let formData = new FormData();
//formData.append('avatarfile', imgFile);
//uploadAvatar(formData).then(response => {
//console.log(window.location.origin + process.env.VUE_APP_BASE_API + response.imgUrl);
});
});
},
效果
二.使用jspdf生成pdf并将图片添加进去
jsPDF中文文档并找不到啥需要的东西
npm install jspdf --save
import jsPDF from 'jspdf';
将uploadImg方法中上传图片部分换为转换成pdf并上传
//点击上传按钮
uploadImg() {
html2canvas(this.$refs.yourDom, {
allowTaint: true, //是否允许不同源的图片污染画布
useCORS: true, //是否尝试使用 CORS 从服务器加载图片
scale: 2, //用于渲染的比例,默认为浏览器设备像素比率。
}).then(canvas => {
// canvas.toDataURL(type, encoderOptions) 是 JavaScript 中用于将 <canvas> 元素的内容转换为数据 URL 的方法
// type:指定输出的图像类型,默认为 "image/png"。也可以是 "image/jpeg" 或 "image/webp" 等格式。
// encoderOptions:用于指定图像编码质量或压缩级别的参数(取值范围为 0-1),仅适用于 "image/jpeg" 和 "image/webp" 格式。
let imgBase64Url = canvas.toDataURL('image/jpeg', 1);
this.imgToPdf(canvas, imgBase64Url);
});
},
//图片转pdf
imgToPdf(canvas, imgBase64Url) {
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.addImage(imgBase64Url, 'JPEG', 0, 0, canvas.width * 0.2, canvas.height * 0.2);
let pdfBlob = pdf.output('blob');
let pdfFile = new File([pdfBlob], '文件名字.pdf', { type: 'application/pdf' });
console.log('pdfFile', pdfFile);
//你的上传接口方法
//let formData = new FormData();
//formData.append('avatarfile', pdfFile);
//uploadAvatar(formData).then(response => {
//console.log(window.location.origin + process.env.VUE_APP_BASE_API + response.imgUrl);
//});
//下载文件
// pdf.save("文件名字.pdf");
},
效果