js文件下载

原创已于 2023-11-30 16:42:43 修改 · 871 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-11-14 19:35:59 首次发布

这篇博客探讨了两种在前端实现文件下载的方法：通过创建`<a>`标签和使用XMLHttpRequest。文章详细解释了每种方法的实现步骤，并提供了相关代码示例。重点关注了文件路径、文件名设置以及如何触发下载。对于可能存在的文件名无法更改的问题，提出了使用XMLHttpRequest的解决方案。

// 下载导入模板
export const downloadTemplate = (herf, fileName) => {
  const a = document.createElement('a')
  a.href = herf
  a.download = fileName
  a.style.display = 'none'
  document.body.appendChild(a)
  a.click()
  a.remove()
}


<script>
import { downloadTemplate } from '路径'

export default {
  data() {
    return {

  },
 methods: {
    momentDate,
    downloadTemplate, // 文件下载
    downLoad(){
        this.downloadTemplate(文件路径, 下载时文件名称)
    }
  }

上面一种方法可能存在无法更改名称

所以我们可以使用xml或者axios来下载，下面为xml下载方法

/**
 * 下载导入模板
 * herf 下载路径
 * fileName 下载文件名称
 */
export const downloadTemplate = (herf: string, fileName: string) => {
  const xml = new XMLHttpRequest()
  xml.open('GET', herf, true)
  xml.responseType = 'blob'
  xml.onload = function () {
    const url = window.URL.createObjectURL(xml.response)
    const a = document.createElement('a')
    a.href = url
    a.download = fileName
    a.click()
  }
  xml.send()
}