vue关于下载文件常用的几种方式_vue.js_

import axios from "axios" import * as auth from '@/utils/auth.js' let ajax = axios.create({     baseURL: process.env.VUE_APP_BASE_API,     timeout: 100000 }); ajax.interceptors.request.use(config => {         config.headers = {             Authorization: auth.getToken(),             // OrgId: auth.getUser().orgId,             // UserId: auth.getUser().id,         }         return config     },     err => {         return Promise.reject(err)     }) let downloadFile = async (url, formData, options) => {     await ajax.post(url, formData, {responseType: 'arraybuffer'}).then(resp => download(resp, options)) } let getFile = async (url, options) => {     await ajax.get(url, {responseType: 'blob'}).then(resp => download(resp, options)) } let download = (resp, options) => {     let blob = new Blob([resp.data], {type: options.fileType ? options.fileType : 'application/octet-binary'})     //创建下载的链接     let href = window.URL.createObjectURL(blob)     downloadBlob(href, options.fileName) } let downloadBlob = (blobUrl, fileName, revokeObjectURL) => {     let downloadElement = document.createElement('a')     downloadElement.href = blobUrl     //下载后文件名     downloadElement.download = fileName     document.body.appendChild(downloadElement)     //点击下载     downloadElement.click()     //下载完成移除元素     document.body.removeChild(downloadElement)     if (revokeObjectURL == null || revokeObjectURL) {         //释放掉blob对象         window.URL.revokeObjectURL(blobUrl)     } } let getDownloadFileUrl = async (url, fileType) => {     let blob     await ajax.get(url, {responseType: 'blob'}).then(resp => {         blob = new Blob([resp.data], {type: fileType ? fileType : 'application/octet-binary'});     })     return window.URL.createObjectURL(blob); } let getDownloadFileUrlByPost = async (url, data, fileType) => {     let blob     await ajax.post(url, data, {responseType: 'blob'}).then(resp => {         blob = new Blob([resp.data], {type: fileType ? fileType : 'application/octet-binary'});     })     return window.URL.createObjectURL(blob); } let getDownloadFileBlob = async (url, fileType) => {     let blob     await ajax.get(url, {responseType: 'blob'}).then(resp => {         blob = new Blob([resp.data], {type: fileType ? fileType : 'application/octet-binary'});     })     return blob; } export default {     ajax,     downloadFile,     getFile,     getDownloadFileUrl,     getDownloadFileUrlByPost,     getDownloadFileBlob,     downloadBlob }

//先引用 import ajax from '../../utils/ajax.js' //使用 ajax.downloadFile('URL',null,{下载的文件名称})

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm install --g vue-cli

npm install

npm run dev/npm run serve

npm i element-ui -S

    import ElementUI from 'element-ui';     import 'element-ui/lib/theme-chalk/index.css';     Vue.use(ElementUI);

npm install vue-router --save 

import Vue from 'vue' import VueRouter from 'vue-router'; Vue.use(VueRouter);  import XXX "../src/components/xxx";    const routes = [   {     path:'/'     component: XXX   },  ]   const router = new VueRouter({   routes })   export default router

import router from "../router";      new Vue({   router,   el: '#app',   components: { App },   template: '' })

npm install --save vue-axios  

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)