# 前端常用代码

前端常用代码

计算 Span 中字体的长度

getOperationColumnWidth (showToolBars) {
    let str = '测试'
    let dom = document.createElement('span')
    dom.style.display = 'inline-block'
    dom.style.fontSize = '14px'
    dom.textContent = str
    document.body.appendChild(dom)
    const width = dom.clientWidth
    document.body.removeChild(dom)
    return width
}

下载文件

• 在Vue组件中，创建一个方法来处理文件下载操作。

methods: {
  downloadFile() {
    // 获取文件的URL或路径
    const fileUrl = '/path/to/file';
    // 创建一个临时的<a>元素
    const link = document.createElement('a');
    link.href = fileUrl;
    // 指定下载的文件名
    link.download = 'file.pdf';
    // 触发下载
    link.click();
  }
}

• 在Vue模板中添加一个按钮或触发元素来调用下载方法。

html
<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

• 确保将 /path/to/file 替换为实际文件的URL或路径，将 file.pdf 替换为所需的文件名。
• 当按钮被点击时，它将触发文件的下载操作。

Base64数据转换并下载

• 安装一个用于转换Base64为Blob的库

npm install b64-to-blob

• 在Vue组件中引入 b64-to-blob 库。

import b64toBlob from 'b64-to-blob';

• 创建一个方法来处理Base64转换和下载操作。

methods: {
     downloadPDF() {
       // 获取Base64数据
       const base64Data = 'base64Str';
       // 将Base64转换为Blob
       const blobData = b64toBlob(base64Data, 'application/pdf');
       // 创建一个URL对象
       const url = URL.createObjectURL(blobData);
       // 创建一个临时的<a>元素
       const link = document.createElement('a');
       link.href = url;
       // 指定下载的文件名
       link.download = 'file.pdf';
       // 触发下载
       link.click();
       // 清理URL对象
       URL.revokeObjectURL(url);
     }
   }

• 在Vue模板中添加一个按钮或触发元素来调用下载方法。

html
   <template>
     <div>
       <button @click="downloadPDF">下载PDF</button>
     </div>
   </template>

• 确保将 base64Str 为实际的Base64数据。当按钮被点击时，它将触发Base64数据的转换和下载操作，并将其保存为PDF文件。

浏览器iframe打开pdf

<iframe id='previewPdf' :src="pdfUrl" ></iframe>

换和下载操作，并将其保存为PDF文件。

浏览器iframe打开pdf

<iframe id='previewPdf' :src="pdfUrl" ></iframe>