脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3下载文件功能

vue3点击按钮下载文件功能的代码实现

 更新时间：2024年01月02日 09:40:09   作者：栀椩  
在写vue项目时,有个需求是点击表格中某一行的下载按钮,然后开始下载这一行对应的文件,所以本文小编给大家介绍了使用vue3实现点击按钮下载文件功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下

VUE3实现点击按钮下载文件功能

在写vue项目时，有个需求是点击表格中某一行的下载按钮，然后开始下载这一行对应的文件，效果如下：

表格每行的最右侧的蓝色按钮就是点击下载，这里涉及到原生的JavaScript写法，长期在写vue项目，原生的写法都很陌生了，记录一下

先上组件的原始代码：

<template>
    <BreadCrumb ref="breadCrumb" :item="item"></BreadCrumb>
    <div class="pane-content">
        <div class="pane-top">
            <div class="module-common-header">

                <div class="button-wrapped">
                    <el-upload v-model:file-list="fileList" class="upload-demo" multiple :on-exceed="handleExceed"
                        action="http://127.0.0.1:3088/api/files/uploadFile" :on-success="handleSuccess"
                        :show-file-list="false">
                        <el-button type="primary">上传文件</el-button>
                    </el-upload>
                </div>
            </div>
            <div class="module-common-table">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column show-overflow-tooltip v-for="(item, index) in tableLabel" :key="index"
                        :prop="item.prop" :label="item.label" />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="downloadFile(scope.row)">下载文件</el-button>
                            <el-popconfirm title="确定删除该文件吗？" confirm-button-text="是" cancel-button-text="否"
                                @confirm="deleteFile(scope.row)">
                                <template #reference>
                                    <el-button type="danger" size="small">删除文件</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="table-footer">
            <el-pagination :page-size="10" :pager-count="5" layout="prev, pager, next" :total="filesLength"
                :current-page="paginationData.currentPage" @current-change="currentPageChange" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
    getFilesLengthAPI,
    returnFileListDataAPI,
    bindFileAndUserAPI,
    deleteFileAPI,
    updateDownloadTimesAPI,
} from '@/apis/files'
const item = ref({
    first: '合同管理',
})
const tableData = ref([])
const tableLabel = [
    { prop: 'file_name', label: '合同名' },
    { prop: 'file_size', label: '合同文件大小' },
    { prop: 'upload_person', label: '上传人' },
    { prop: 'download_number', label: '下载次数' },
    { prop: 'upload_time', label: '上传时间' },
    // { prop: 'message_content', label: '消息内容' },
]

const fileList = ref([])
// 上传成功之后的回调函数
const handleSuccess = async (response, uploadFile, uploadFiles) => {
    if (response.status == 0) {
        const name = JSON.parse(localStorage.user).userInfo.name
        const url = response.url
        const res = await bindFileAndUserAPI({ name, url })
        if (res.status == 0) {
            ElMessage.success('上传成功')
            getCurrentPageData()
            getFilesLength()
        }
        else ElMessage.error('上传失败')
    } else {
        ElMessage.error('上传失败，请检查是否重名')
    }

}
// 超出文件个数限制的钩子
const handleExceed = (uploadFile, uploadFiles) => { }

// 下载文件
const downloadFile = async (row) => {
    // console.log(row)
    const { download_number, id } = row
    await updateDownloadTimesAPI({ download_number, id })
    const url = row.file_url
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', '')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    getCurrentPageData()
}
// 删除文件
const deleteFile = async row => {
    const res = await deleteFileAPI({ id: row.id })
    if (res.status == 0) ElMessage.success('删除成功')
    else ElMessage.error('删除失败')
    getCurrentPageData()
    getFilesLength()
}

// 分页
const paginationData = ref({
    // 总页数
    pageCount: 1,
    // 当前页
    currentPage: 1,
})
// 获取数据总数
const filesLength = ref(0)
const getFilesLength = async () => {
    const res = await getFilesLengthAPI()
    filesLength.value = res.filesCount
}
// 获取首页数据
const getFirstPageList = async () => {
    const res = await returnFileListDataAPI({ page: 1 - 1 })
    res.forEach(item => {
        item.upload_time = item.upload_time?.slice(0, 19)
        item.file_size = Math.floor(item.file_size) + 'kb'
    })
    tableData.value = res
}
// 页码切换
const currentPageChange = async (val) => {
    paginationData.value.currentPage = val
    const res = await returnFileListDataAPI({ page: val - 1 })
    res.forEach(item => {
        item.upload_time = item.upload_time?.slice(0, 19)
        item.file_size = Math.floor(item.file_size) + 'kb'
    })
    tableData.value = res
}
// 增删数据后，需要刷新当前页数据
const getCurrentPageData = async () => {
    const res = await returnFileListDataAPI({ page: paginationData.value.currentPage - 1 })
    res.forEach(item => {
        item.upload_time = item.upload_time?.slice(0, 19)
        item.file_size = Math.floor(item.file_size) + 'kb'
    })
    tableData.value = res
}

onMounted(() => {
    getFilesLength()
    getFirstPageList()
})
</script>

<style lang="scss" scoped>
.pane-content {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 118px);
    background: #fff;

    .pane-top {
        padding: 8px;
        background: #fff;

        .module-common-header {
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .module-common-table {
            min-height: 10px;
            padding: 10px 20px 20px;
            margin-bottom: 8px;
            background: #fff;
        }


    }

    .table-footer {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }
}
</style>

我用的是vue3+setup语法糖写法，代码比较长，关注一下与下载相关的代码：

html部分

<el-table-column fixed="right" label="操作">
	<template #default="scope">
		<el-button type="primary" size="small" @click="downloadFile(scope.row)">下载文件</el-button>
			<el-popconfirm title="确定删除该文件吗？" confirm-button-text="是" cancel-button-text="否"
                @confirm="deleteFile(scope.row)">
				<template #reference>
					<el-button type="danger" size="small">删除文件</el-button>
				</template>
			</el-popconfirm>
	</template>
</el-table-column>

其实就是表格最后一列，添加两个按钮，然后为这个按钮传入本行的所有数据，下载文件按钮添加点击函数downloadFile，并传入行数据作为参数

JavaScript部分

js部分是实现点击下载的核心，看downloadFile方法

// 下载文件
const downloadFile = async (row) => {
    // console.log(row)
    const { download_number, id } = row  					// 从行中获取下载文件接口的传入参数
    await updateDownloadTimesAPI({ download_number, id })  	// 调用下载文件的接口
    const url = row.file_url  								// 从行数据中获取下载链接
    const link = document.createElement('a')				// 创建链接标签，即a标签，并将dom命名为link
    link.href = url											// 为dom为link的元素添加链接
    link.setAttribute('download', '')						// 为link设置下载属性
    document.body.appendChild(link)							// 把创建并配置好的link dom添加到页面文档中
    link.click()											// 模拟dom的点击事件
    document.body.removeChild(link)							// 从文档中移出link节点
    getCurrentPageData()									// 调用写好的方法刷新数据
}

相关的解释我都写在了上面的代码中，其中下面两个步骤不是必须的：

  • await updateDownloadTimesAPI({ download_number, id }) ，点击下载后，要在数据库中标记，增加点击量
  • getCurrentPageData()，因为操作了数据库，数据要更新，所以这是为了更新数据

以上就是vue3实现点击按钮下载文件功能的详细内容，更多关于vue3下载文件功能的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JointJS流程图的绘制方法

    JointJS流程图的绘制方法

    这篇文章主要为大家介绍了JointJS流程图的绘制方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 详解基于vue-cli优化的webpack配置

    详解基于vue-cli优化的webpack配置

    本篇文章主要介绍了详解基于vue-cli优化的webpack配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue中watch的实际开发学习笔记

    vue中watch的实际开发学习笔记

    watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下
    2022-11-11
  • 手把手教你在vue中使用three.js

    手把手教你在vue中使用three.js

    最近在vue3项目中通过three.js实现了实际的三维效果demo,下面这篇文章主要给大家介绍了关于在vue中使用three.js的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 解决v-if 与 v-for 同时使用报错的问题

    解决v-if 与 v-for 同时使用报错的问题

    在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错，遇到这个问题如何解决呢？下面小编给大家带来了关于v-if 与 v-for 使用报错问题分析及解决方法，一起看看吧
    2022-03-03
  • Vue之Watcher源码解析（1）

    Vue之Watcher源码解析（1）

    这篇文章主要为大家详细介绍了Vue源码之Watcher的基础知识，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Vue项目History模式404问题解决方法

    Vue项目History模式404问题解决方法

    本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue安装遇到的5个报错及解决方法

    vue安装遇到的5个报错及解决方法

    在本篇文章里小编给大家分享了关于vue安装遇到的5个报错小结以及解决方法，需要的朋友们参考下。
    2019-06-06
  • vue实现登录时图形验证码

    vue实现登录时图形验证码

    这篇文章主要为大家详细介绍了vue实现登录时图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue表单预校验 validate方法不生效问题

    Vue表单预校验 validate方法不生效问题

    这篇文章主要介绍了Vue表单预校验 validate方法不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04

最新评论