阿里云网站域名申请今日小说百度搜索风云榜

vue2.6附件预览及下载

用户上传了自己的附件信息后，在pc端需要支持预览及下载。上传的文件格式可能有多种。常见的有：png、img、docx、doc、pdf、xlsx、xls……。需要同时支持多种文件类型的预览及下载。

文件预览

pdf/docx/xlsx预览

在开始使用时，使用过pdfjs、embed、iframe 去预览pdf，但是改动成本较大。在本项目中的文件都不会过大，并且只需要基础预览即可。最终使用了vue-office 进行基础附件预览。

使用步骤

1. 安装对应依赖

   
   npm install @vue-office/docx vue-deminpm install @vue-office/excel vue-deminpm install @vue-office/pdf vue-demi
   

   如果vue<=2.6,则需要额外安装

   npm install @vue/composition-api
   

2. 在页面中引入并使用

<template><pdf v-if="fileType === 'pdf'" :src="url" /><docx v-if="fileType === 'docx'" :src="url" /><excel v-if="fileType === 'xlsx'" :src="url" /></div>
</template>
<script>
import pdf from '@vue-office/pdf'
import docx from '@vue-office/docx'
import excel from '@vue-office/excel'export default {components: { pdf, docx, excel }}// 省略了prop参数……</script>

---

image/* 预览图片

对于图片的展示可以直接使用img标签，但如果我们需要对图片进行放大，旋转等操作，则需要借助第三方组件，可以使用element自带的预览或者v-viewer。

v-viewer的使用

参考链接

• 安装依赖 npm install viewerjs
• 全局引入或局部引入

   // 局部引入
  const ViewerDom = document.getElementById('#imgBox');
  const viewer = new Viewer(ViewerDom, { // 配置项省略});
  // main.js中全局引入
  import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer
  Vue.use(VueViewer)
  

---

doc/xls文件预览

vue-office底层基于docx.js解析器，仅支持遵循Office Open XML标准的.docx格式，而.doc属于二进制格式（OLE2复合文档），解析复杂度高且需专门解码库。要实现.doc预览，需通过格式转换或专用解析器两种路径。

可操作的方案如下：

方案	开发成本	维护成本	效果质量	适用场景
后端转换+前端预览	中	低	★★★★★	企业级生产环境
Mammoth.js前端解析	低	高	★★☆☆☆	简单文档临时预览
OnlyOffice集成	高	中	★★★★★	需要完整编辑功能
微软官方嵌入	中	低	★★★★★	已有Azure生态集成

从开发成本上考虑，可以直接使用微软官提供的在线预览的方式。直接通过iframe嵌入微软的预览地址。

使用步骤

• 处理doc或xls的链接地址

computed:{officeViewerUrl() {return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(this.url)}`},
}

• 通过iframe直接嵌入该链接

 <!-- ✅ 新增微软在线预览处理 --><template><iframev-if="isLowFileType":src="officeViewerUrl"class="office-iframe"frameborder="0"></iframe></template><style scoped lang="less">.file-wrapper {overflow: auto;// ✅ 添加iframe样式.office-iframe {width: 100%;height: 80vh;min-height: 600px;border: 1px solid #eee;border-radius: 4px;}}</style>

总结： 对于pdf/xlsx/docx，我们直接使用vue-office进行预览；图片可以使用v-viewer预览；兼容低版本的doc/xls，则使用微软官方提供的在线预览方案。将上述代码整合即为我们项目的附件预览组件。

---

附件下载

前提：现在有一个可以直接访问的在线链接地址，以及文件的名称。文件类型需要我们根据名称取获取，类型可能为之前的上传类型，比如pdf、docx、xlsx、png、jpg……

刚开始使用的是<a>标签，并将href设置为链接地址，但是这样存在一个问题。图片类型的会直接下载，非图片类型比如pdf，则会打开新的标签页进行预览，无法直接下载。用户可能上传的有多个附件，并且附件类型可能不同。因此我们展示一个链接以及一个按钮，分别用于预览和下载。

下载按钮实现

function handleDownload(loadLink, name) {try {// 创建隐藏的下载链接const link = document.createElement('a')link.style.display = 'none'// 处理跨域下载const response = await fetch(loadLink)const blob = await response.blob()const objectURL = URL.createObjectURL(blob)link.href = objectURLlink.download = name // 强制使用指定文件名document.body.appendChild(link)link.click()// 清理资源URL.revokeObjectURL(objectURL)document.body.removeChild(link)} catch (error) {this.$message.error(`下载失败: ${error.message}`)}
}

预览按钮实现

function handlePreview(loadLink, name) {// 其他类型使用浏览器默认行为const link = document.createElement("a");link.href = loadLink;link.target = "_blank";link.rel = "noopener noreferrer";document.body.appendChild(link);link.click();document.body.removeChild(link);
}

链接展示

<div v-for="item in attachList" :key="item.id"
><atarget="_blank"rel="noopener noreferrer"@click.prevent="clickFileLink(item.url, item.name)">{{ item.name }}</a>// 为图片时不展示下载按钮<a-buttonv-if="!$utils.isImage(item.name)"type="link"size="small"@click="handleDownload(item.url, item.name)">下载附件</a-button>
</div>

总结

在本文中，我们详细介绍了如何在 Vue 2.6 项目中实现多种文件类型的预览和下载功能。通过整合不同的技术和工具，我们成功解决了不同类型文件的预览需求，并提供了一个通用的下载解决方案。

小知识

a标签的下载行为取决于以下因素

因素	触发下载的条件	触发打开的条件	典型场景示例
服务器响应头	Content-Disposition: attachment	Content-Disposition: inline	强制用户下载财务报告.docx
HTML属性	存在 download 属性（且同源）	无 download 属性	<a href="file.pdf" download>
文件类型	浏览器无法渲染的格式（.zip/.exe）	浏览器可渲染格式（.pdf/.jpg）	.txt 文本直接展示，.apk 触发下载
跨域限制	跨域文件且未配置 CORS	同源文件	CDN 上的图片直接打开，跨域 Excel 被拦截
浏览器设置	用户手动设置「始终下载此类文件」	默认处理策略	用户强制所有 PDF 自动下载
浏览器兼容性	Safari 对部分格式的保守策略	Chrome 对 PDF 的内置预览	iOS 上 .docx 可能直接下载

决策流程