使用QRcode生成二维码
1、安装npm install qrcode
2、引入import QRCode from ‘qrcode’
3、进一步使用处理:
export async function getQRCode(url) {
const _myQRCode = await QRCode.toDataURL(url)
return _myQRCode
}
4、实际使用:
const createQRCode = async () => {
const url = 'http://xxxxx'; // url
const qrcodeUrl = await getQRCode(url);
setQrData(qrcodeUrl); // 存储对应的二维码图片base64
}
愉快又简单!!!
html2canvas与jspdf生成图片
1、首先写一块内容,加上获取dom的id;如:
<div id='pdfDom'>
<div>1111</div>
<div>222</div>
<div>33</div>
</div>
2、固定生成图片写法
function donwloadImage() {
// html -> canvas
html2canvas(document.querySelector("#pdfDom")).then(canvas => {
// canvas -> pdf
const a4Width = 595.28; // a4宽高
const a4Height = 841.89;
const options = {
allowTaint: true,
name: `凭证${new Date().getTime()}`,
dpi: window.devicePixelRatio,
scale: 4, // 导出文件清晰度,值越大清晰度越高,文件体积越大(默认值为设备dpr*2)
}
// 生成的画布元素宽高(需要收缩回原比例大小)
const canvasWidth = canvas.width / options.scale;
const canvasHeight = canvas.height / options.scale;
// 页面等比例缩放后宽高
const pageWidth = a4Width;
const pageHeight = (a4Width / canvasWidth) * canvasHeight;
//返回图片dataURL,参数:图片格式和清晰度(0-1)
const jpeg = canvas.toDataURL('image/jpeg', 1.0);
//方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
const doc = new JsPDF('', 'pt', 'a4');
doc.addImage(jpeg, 'JPEG', 0, 0, pageWidth, pageHeight); // 从图片顶部开始打印
doc.save(options.name + '.pdf');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
// if (canvasHeight < pageHeight) {
// doc.addImage(jpeg, 'JPEG', 0, 0, pageWidth, pageHeight); // 从图片顶部开始打印
// } else {
// while (canvasHeight > 0) {
// doc.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight);
// canvasHeight -= pageHeight;
// position -= a4Height;
// //避免添加空白页
// if (canvasHeight > 0) {
// doc.addPage();
// }
// }
// }
});
}
3、调用donwloadImage方法即可,注意需要dom加载了才能下载,有特殊场景就使用显隐来控制吧。