js文件下载

onYang

已于 2023-11-30 16:42:43 修改

阅读量555

点赞数

文章标签： javascript 前端开发语言

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

本文链接：https://blog.csdn.net/q12as/article/details/127853811

版权

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

摘要由CSDN通过智能技术生成

// 下载导入模板
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()
}