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

点击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="#" @="getFile">下载模板文件</a>




            </div>




            <div class="status">




                <ul>




                    <li v-for="(item, index) in lists" :key="" class="flex-item-center">




                        {{ index + 1 }} {{  }}



                        <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/;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',



                });



            }



        },