vue中点击下载

最新推荐文章于 2025-01-14 09:26:51 发布

晨光熹微fd

最新推荐文章于 2025-01-14 09:26:51 发布

阅读量835

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/yangyanqin2545/article/details/121196530

版权

这篇博客介绍了如何在 Vue 应用中实现点击表格列下载文件的功能。通过使用 `el-button` 组件触发 `handleDownd` 方法，传递行数据，然后在该方法中创建并点击一个 `a` 标签来下载文件。请求接口获取文件流，并设置响应类型为 'blob'，最后利用 `URL.createObjectURL` 创建下载链接并触发下载。

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

vue中点击下载

1、template中代码片段

<el-table-column fixed="right" label="" width="100">
    <template slot-scope="scope">
        <el-button
        type="text"
        size="small"
        @click="handleDownd(scope.row)"
        >下载
        </el-button>
    </template>
</el-table-column>

2、js代码

  // 点击下载
    handleDownd(rowItem) {
      const params = {
        realFileName: rowItem.fileRealName
      }
      StrategyDownd(params).then(res => {
        const link = document.createElement('a')
        link.download = '批量模板.xls'//所下载的文件名称，此为自定义属性
        link.style.display = 'none'
        link.href = window.URL.createObjectURL(res)
        document.body.appendChild(link)
        link.click()
        window.URL.revokeObjectURL(link.href) // 释放URL 对象
        document.body.removeChild(link)
      })
   },
	// 下载
	export function StrategyDownd(params) {
	 return request({
	   url: `${MODULE_URL}/signal/file`,
	   method: 'get',
	   params,
	   responseType: 'blob'
	 })
	}