Vue about several common ways to download files

Common ways to download vue files

Open directly

Open directly means the method we use directly (URL)

Advantages: Simple operation
Disadvantages: Can't carry tokens

We can encapsulate a method ourselves

For example, as follows:

import axios from "axios"
import * as auth from '@/utils/'
let ajax = ({
    baseURL: .VUE_APP_BASE_API,
    timeout: 100000
});
(config =&gt; {
         = {
            Authorization: (),
            // OrgId: ().orgId,
            // UserId: ().id,
        }
        return config
    },
    err =&gt; {
        return (err)
    })
let downloadFile = async (url, formData, options) =&gt; {
    await (url, formData, {responseType: 'arraybuffer'}).then(resp =&gt; download(resp, options))
}
let getFile = async (url, options) =&gt; {
    await (url, {responseType: 'blob'}).then(resp =&gt; download(resp, options))
}
let download = (resp, options) =&gt; {
    let blob = new Blob([], {type:  ?  : 'application/octet-binary'})
    //Create a download link    let href = (blob)
    downloadBlob(href, )
}
let downloadBlob = (blobUrl, fileName, revokeObjectURL) =&gt; {
    let downloadElement = ('a')
     = blobUrl
    //File name after download     = fileName
    (downloadElement)
    //Click to download    ()
    //Download to remove elements    (downloadElement)
    if (revokeObjectURL == null || revokeObjectURL) {
        //Release the blob object        (blobUrl)
    }
}
let getDownloadFileUrl = async (url, fileType) =&gt; {
    let blob
    await (url, {responseType: 'blob'}).then(resp =&gt; {
        blob = new Blob([], {type: fileType ? fileType : 'application/octet-binary'});
    })
    return (blob);
}
let getDownloadFileUrlByPost = async (url, data, fileType) =&gt; {
    let blob
    await (url, data, {responseType: 'blob'}).then(resp =&gt; {
        blob = new Blob([], {type: fileType ? fileType : 'application/octet-binary'});
    })
    return (blob);
}
let getDownloadFileBlob = async (url, fileType) =&gt; {
    let blob
    await (url, {responseType: 'blob'}).then(resp =&gt; {
        blob = new Blob([], {type: fileType ? fileType : 'application/octet-binary'});
    })
    return blob;
}
export default {
    ajax,
    downloadFile,
    getFile,
    getDownloadFileUrl,
    getDownloadFileUrlByPost,
    getDownloadFileBlob,
    downloadBlob
}

Then just introduce it directly into the page we call

//Quot firstimport ajax from '../../utils/'
//use('URL',null,{Downloaded file name})

Isn't it easy to see this way

Commonly used commands for vue

Common commands for creating vue projects

If the vue project error occurs, you can delete the dependencies, clean the cache and reinstall it

Clean the cache npm cache clean --force

The first step is to create a Taobao image and install an npm image (if it is already installed, the second step is enough)

npm install -g cnpm --registry=

Step 2: Install vue-vli globally

npm install --g vue-cli

Step 3: Create a vue project

vue init webpack project name

vue project deployment

npm install

Start the project

npm run dev/npm run serve

1. Install element_ui

npm i element-ui -S

After the installation is successful, import element-ui in the middle and use

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/';
    (ElementUI);

2. Install vue_router

npm install vue-router --save

If there is no folder router (usually, you need to choose to install it yourself under vue2.0, and vue3.0 is created), we will create the file directly. Put the file into the following configuration

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

To apply files in. We need to put the router in it

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

3. Install the axios component, the installation command is as follows:

npm install --save vue-axios

Introduce the following code under the file:

import axios from 'axios'
import VueAxios from 'vue-axios'
(VueAxios, axios)

Summarize

1. Install vue-cli

npm install --global vue-cli

2. Create a new project based on webpack templates

vue init webpack project name

3. Run: npm run dev

4. Installation dependency: cd project name npm install

5. Install the vue-resource plug-in (initiate a request through XMLHttpRequest or JSONP and process the response //get post request): npm install vue-resource --save

6. Install the routing plug-in:

npm install vue-router --save

7. Install element-ui:

npm i element-ui -S (remember to introduce it in it after installation)

8. Install axios npm install axios --save

9. Install Echarts npm install echarts --save

10. If you want to terminate the command running in the terminal (cmd), ctrl +c

11. Install the specified version of jquery

npm i jquery@ version number

12. If the node_modules file in the project is deleted, use npm install to download all dependencies in the dependencies.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.