html2pdf,qrcode库及url参数拼接

概览

此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理

一. html2pdf

html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端，将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生成报表等场景非常有用。

用法示例

javascript 复制代码

 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

用法示例

javascript 复制代码

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参数拼接

代码示例

javascript 复制代码

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}`;  
  }  
}