vue3中点击文件预览以及下载的方法

最新推荐文章于 2025-03-01 03:00:00 发布

xhjtcflm

最新推荐文章于 2025-03-01 03:00:00 发布

阅读量3.4k

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/xhjtcflm/article/details/131698295

版权

文章展示了如何在Vue3应用中利用<scriptsetup>语法糖和ElementPlus组件库，特别是<el-link>组件，来创建文件的下载链接和预览功能。点击预览按钮会打开新窗口进行在线预览，而点击下载按钮则触发文件的下载。关键方法包括accessoryClick用于预览，downloadFile用于下载文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里使用vue3的<script setup>语法糖写法，搭配element plus实现文件的下载与预览

结构部分：使用element-plus 的el-link链接

 <el-link
   v-for="(item, index) in state.urlList"
   type="primary"
   ref="downloadLink"
   :href="item"
   :underline="false"
   :key="item.index"
   target="_blank"
   style="display: block; margin-bottom: 10px,height: 20px;width: max-content;margin-left: 2em"
 >附件{{ index + 1 }}
  <span style="margin-left: 10px; margin-right: 2px" @click="accessoryClick(item)"
  >预览</span>|
  <span style="margin-left: 2px" @click="downloadFile(item)">下载</span>
</el-link>

交互部分代码：

//点击预览按钮
const accessoryClick = (value) => {
  window.open(
    'http://ip:端口/onlinePreview?url=' + encodeURIComponent($untils.$encode(value))
  )
}

//点击下载按钮
const downloadLink = ref()
const downloadFile = (url) => {
  if (downloadLink.value) {
    downloadLink.value.href = url
    downloadLink.value.click()
  }
}