使用html2canvas生成图片
使用的资源npm i html2canvas
获得base64的图片
const container = document.body;
const canvas = await html2canvas(container, {
scale: window.devicePixelRatio,
width: container.offsetWidth,
height: container.offsetHeight,
useCORS: true,
allowTaint: false
});
const missionImg = canvas.toDataURL('image/jpeg', 1.0);
下载图片
var a = document.createElement('a');
a.download = '文件.jpg'; //下载的文件名，默认是'下载'
a.href = missionImg;
document.body.appendChild(a);
a.click();
a.remove(); //下载之后把创建的元素删除
使用jspdf生成pdf
使用的资源<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>，这个包安装的太大，所以引用静态资源放在本地，
当前图片可以在pdf文件中一页放下，不考虑分页的情况
// 三个参数，第一个方向，第二个尺寸，第三个尺寸格式
const doc = new jspdf.jsPDF('', 'pt', 'a4');
// 30, 30, 控制文字距离左边，与上边的距离
// addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
// 因为使用的图片是没有白边的，所以左边、上边减去30，图片整体宽度减去60，高度按照比例进行计算
doc.addImage(missionImg, 'JPEG', 30, 30, 595.28 - 60, (595.28 - 60) / container.offsetWidth * container.offsetHeight);
pdf 文件下载
doc.save('download.pdf');
pdf 文件上传
这里的文件上传使用的把base64格式转换成文件再上传，因此需要有一个转换的过程。
同时如果数据里面有对象或者数组需要对每个属性单独添加。params.append('obj[keyName]', keyValue),数组就需要加上索引的属性访问。
// 生成file
function dataURLtoFile(dataurl) {
const arr = dataurl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const file = new File([u8arr], 'file.pdf', {type: mime});
return file;
}
const file = dataURLtoFile(doc.output('datauri'))
const params = new FormData();
params.append(file, file);
// axios.post(url, params)
直接打开文件
在文件上传的基础上，当生成了文件以后生成一个文件链接并打开
const blob = dataURLtoFile(doc.output('datauri'));
window.open(URL.createObjectURL(blob));
如果被浏览器拦截，在点击按钮之前优先生成好链接，点击按钮以后仅仅open一下生成的链接。
