jspdf
一个保存文件实用的库
一个详情的表述

使用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一下生成的链接。