html2pdf,qrcode库及url参数拼接

本文主要是介绍html2pdf,qrcode库及url参数拼接，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概览

此篇文章主要是对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}`;  }  
}