vue 实现下载文件至本地(pdf,word,zip,xlsx等格式)

背景:在做管理后台类型项目时总会遇到下载文件的需求,实践实现调用此方法传入相应字段即可实现下载文件的需求,此方法下载时暂时没有发现特殊限制。

// 注释:imgSrc:下载文件链接地址,fileName:下载文件名称
async function downloadIamge(imgSrc, fileName) {
  // 获取图片对象和画布对象
  const imgUrl = imgSrc
  const response = await fetch(imgUrl)
  const blob = await response.blob()
  // 创建下载链接
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  // 释放 Blob URL
  window.URL.revokeObjectURL(url)
}

简单记录如有问题或更优解还请不要吝啬的共同沟通学习,此结。

  • 14
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue应用中实现本地预览Word(.docx)、Excel(.xlsx)和PDF文件,你可以使用一些现有的库和插件。以下是一种常见的方法,使用`vue-pdf`、`xlsx`和`mammoth.js`库来实现此功能: 1. 首先,安装所需的库: ```bash npm install vue-pdf xlsx mammoth ``` 2. 创建一个Vue组件,并导入所需的库: ```vue <template> <div> <div v-if="fileType === 'pdf'"> <pdf :src="fileUrl" /> </div> <div v-else-if="fileType === 'xlsx'"> <div>{{ excelData }}</div> </div> <div v-else-if="fileType === 'docx'"> <div v-html="wordContent"></div> </div> </div> </template> <script> import { read, utils } from 'xlsx'; import mammoth from 'mammoth'; import { pdf } from 'vue-pdf'; export default { components: { pdf, }, data() { return { fileType: '', fileUrl: '', excelData: [], wordContent: '', }; }, mounted() { this.loadFile(); }, methods: { loadFile() { const file = 'path/to/your/file'; const extension = file.split('.').pop(); if (extension === 'pdf') { this.fileType = 'pdf'; this.fileUrl = file; } else if (extension === 'xlsx') { this.fileType = 'xlsx'; this.loadExcelFile(file); } else if (extension === 'docx') { this.fileType = 'docx'; this.loadWordFile(file); } }, loadExcelFile(file) { const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = read(data, { type: 'array' }); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; this.excelData = utils.sheet_to_json(worksheet, { header: 1 }); }; reader.readAsArrayBuffer(file); }, loadWordFile(file) { const reader = new FileReader(); reader.onload = (e) => { const arrayBuffer = e.target.result; const options = {}; mammoth.extractRawText({ arrayBuffer }, options) .then((result) => { this.wordContent = result.value; }) .catch((error) => { console.error(error); }); }; reader.readAsArrayBuffer(file); }, }, }; </script> ``` 在上面的代码中,你需要将`path/to/your/file`替换为实际文件的路径。根据文件的扩展名,组件将显示不同的预览方式。 请注意,该示例仅提供了一种基本实现方法。你可以根据自己的需求进行修改和调整。 希望这可以帮助到你!如果你有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值