# 前端常用代码

2023-12-21 19:37:44

前端常用代码

计算 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数据转换并下载

  • 安装一个用于转换Base64Blob的库
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>

文章来源:https://blog.csdn.net/qq_37248504/article/details/135136533
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。