Since born in the world, I hope I can leave a name in the future, do something others can not do

preface

1 introduction

Common properties props

url

// Download address :url="url"Copy the code

params

// Download parameter :params="params"Copy the code

filename

// filename :filename="filename"Copy the code

Common events

after-download

@after-download="afterDownload"Copy the code

2 use

The installation

npm i js-file-download --save
Copy the code

Axios processing

import Axios from 'axios'
Axios({
  method: 'post',
  url: this.url,
  data: this.params,
  responseType: 'blob',
  headers: {
    'Content-Type': 'application/octet-stream'
  }
})
Copy the code

File download

<template> <div @click="download"> <slot> </button> </slot> </div> </template> <script> import Axios from 'axios' import fileDownload from 'js-file-download' export default { props: { url: { type: String, required: true }, params: { type: Object, default() { return {} } }, filename: { type: String, default: 'excel' } }, methods: { download() { Axios({ method: 'post', url: this.url, data: this.params, responseType: 'blob', headers: { 'Content-Type': 'application/octet-stream' } }).then(res => { fileDownload(res.data, this.filename) this.$emit('after-download') }) } } } </script>Copy the code

3. Pay attention to

1. Axios sets responseType to blob 2. When a file is damaged, the content-Type request header configuration is added

The end of the

You will not be like me, at the moment, is looking at the moon in the sky in a daze ~

Good night ^_^

Refer to the link

  • Js – file – download documents
  • The js-file-download file is damaged
  • Axios document

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to
  • So, how about a VUE plugin (15) every day — Vue-Content-Placeholder
  • Learn a vUE plugin every day (16) – VUe-video-player