前端Vue项目中点击a标签实现下载文件到本地的功能

本文链接：https://blog.youkuaiyun.com/AiGarry/article/details/124289858

本文介绍了在前端Vue项目中如何利用a标签和后台接口实现点击下载图片、PDF及Word、Excel文件到本地的功能，包括download属性的使用及其在不同文件类型中的表现。

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

点击a标签可实现下载图片或者是文件到本地的功能

1、根据后台提供的接口url下载文件到本地

<a :href="后台给接口提供的文件的url地址">点击下载文件</a>

2、通过a标签的download属性进行下载，下载文件到本地

<a href="具体的文件的地址" download>点击下载文件</a>

①如果是图片或者是pdf文件，会直接在浏览器中打开，如果是word或者是excel文件会下载到本地

②如果download不给值，会使用默认的文件名

3、


    <el-dialog :model-value="isShow" title="批量上传" @close="closeDialog" width="400px">
        <div class="content">
            <div class="file-handle">
                <el-upload action="/roadtest/apigateway/pi-roadtest-analysis/rest/v1/roadtest/defect/import/excel" @success="uploadSuccess">
                    <el-button type="primary">点击上传</el-button>
                </el-upload>
                <a href="#" @click.prevent="getFile">下载模板文件</a>
            </div>
            <div class="status">
                <ul>
                    <li v-for="(item, index) in lists" :key="item.id" class="flex-item-center">
                        {{ index + 1 }} {{ item.title }}
                        <el-icon color="#67c23a"><circle-check /></el-icon>
                    </li>
                </ul>
            </div>
        </div>
        <template #footer>
            <span>
                <el-button type="primary" @click="closeDialog">确定</el-button>
            </span>
        </template>
    </el-dialog>


        async getFile() {
            const res = await getFile();
            if (res.status == '200') {
                const link = document.createElement('a');
                let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
                let objectUrl = window.URL.createObjectURL(blob);
                link.href = objectUrl;
                link.download = 'Excel模板';
                const elementA = document.querySelector('.view-container');
                link.style.display = 'none';
                elementA?.append(link);
                link.click();
                elementA?.removeChild(link);
                window.URL.revokeObjectURL(link.href);
                ElMessage({
                    message: '下载成功',
                    type: 'success',
                });
            } else {
                ElMessage({
                    message: '下载失败',
                    type: 'error',
                });
            }
        },