前端常用代码

计算 Span 中字体的长度

getOperationColumnWidth (showToolBars) {let str = '测试'let dom = document.createElement('span')dom.style.display = 'inline-block'dom.style.fontSize = '14px'dom.textContent = strdocument.body.appendChild(dom)const width = dom.clientWidthdocument.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转换为Blobconst 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>