概览
此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理
一. html2pdf
html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端，将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生成报表等场景非常有用。
用法示例
function downloadQrCode() {isPrint.value = true;const opt = {margin: 0,filename: qrName.value + '.pdf',image: { type: 'jpeg', quality: 0.98 },loadingnvas: {scale: 5,},jsPDF: {unit: 'in', // 单位设置为英寸 format: 'a1', // 纸张大小设置为 A1 orientation: 'landscape' // 页面方向设置为横向 },};new html2pdf().set(opt).from(qrHTMLRef.value).save().finally(() => {isPrint.value = false;});}
- 使用
html2pdf插件创建一个新的实例。 - 使用
.set(opt)方法设置 PDF 的选项。 - 使用
.from(qrHTMLRef.value)方法指定要转换为 PDF 的 HTML 内容。这里假设qrHTMLRef.value是一个 HTML 字符串或元素的引用。 - 使用
.save()方法保存并下载 PDF 文件。 - 使用finally方法设定最后执行的逻辑
二. qrcode
用法示例
import { toDataURL } from 'qrcode'; async function generateQRCode() { try { const text = 'Hello, QR Code!'; // 要编码为二维码的文本 const options = { errorCorrectionLevel: 'H',width: 256, // 二维码宽度 color: { dark: '#000000', // 二维码中深色部分的颜色 light: '#ffffff', // 二维码中浅色部分的颜色 }, }; const dataURL = await toDataURL(text, options); // 生成二维码的 Data URL console.log(dataURL); // 打印 Data URL 到控制台 // 可以将 dataURL 设置到 img 元素的 src 属性中显示二维码 const imgElement = document.getElementById('qrcode-img'); imgElement.src = dataURL; } catch (error) { console.error('Error generating QR code:', error); }
} generateQRCode();
text参数在qrcode库中不是直接表示页面路径，但你可以将页面路径（URL）作为文本内容传递给toDataURL函数来生成一个指向该页面的二维码。
errorCorrectionLevel 属性在二维码生成中代表纠错级别。在二维码生成库中，纠错级别通常用于确定在二维码中嵌入多少额外的数据，以便在二维码被部分损坏或污损时仍可以读取。
纠错级别通常有以下几种（不同的库可能命名稍有不同，但概念相似）：
L (Low) - 低纠错级别。适用于高质量打印或几乎无损坏的二维码。
M (Medium) - 中等纠错级别。适用于一般打印和日常使用。
Q (Quartile) - 四分之一纠错级别。适用于稍微有损坏的二维码。
H (High) - 高纠错级别。适用于损坏较为严重或打印质量较低的二维码。
当你选择一个较高的纠错级别时，二维码会包含更多的冗余数据，这会增加二维码的复杂性和大小。然而，这也意味着二维码在遭受损坏时更有可能成功解码。
三. url参数拼接
代码示例
function setObjToUrlParams(baseUrl, obj) { if (!obj) return baseUrl; const paramsArray = Object.entries(obj).map(([key, value]) => { return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`; }); // join方法拼接成字符串const newParameters = paramsArray.join('&'); const id = baseUrl.lastIndexOf('?'); if (id < 0) { // 如果原始 URL 没有查询参数，则直接添加 '?' 和参数 return `${baseUrl}?${newParameters}`; } else { console.log(baseUrl.slice(id + 1),'1233')// 如果原始 URL 有查询参数，则保留原有的 '?'，并添加新的参数 // 使用 '&' 连接新旧参数，并确保没有多余的斜杠 return `${baseUrl.slice(0, id)}?${baseUrl.slice(id + 1).replace(/\/$/, '')}&${newParameters}`; }
}
)
)
