js保存文件到本地-Toy模板网

这篇具有很好参考价值的文章主要介绍了js保存文件到本地。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用原生方法保存文件到本地

基本流程

确定要保存的文本、保存格式及保存文件类型；
根据保存格式生成 url链接，设置文件的下载地址；
创建一个 a 标签（即a标签指向的就是我们要保存的文件）；
给 a 标签添加点击事件，下载文件到我们指定的地址；
释放url链接;

实现方式

1,document.createEvent创建事件，我们自己给DOM创建一个事件；
- 创建自定义事件流程：
  - 创建事件；
  - 定义事件名；
  - 监听事件；
  - 分发给触发对象（触发对象可以是任何元素或其他事件目标）；

function download(data,type,filename) {

  let text = JSON.stringify(data.value)

  let domElement = document.createElement('a')

  domElement.setAttribute('href', `data:${type},`+ encodeURIComponent(text))

  domElement.setAttribute('download', filename)

  if(document.createEvent) {

    let event = document.createEvent('MouseEvents')

    event.initEvent('click', true, true)

    domElement.dispatchEvent(event)

  }else{

    domElement.click

  }

}

2,浏览器事件；

function download(data,type,filename) {

  const button = document.getElementById('button')
  
  // 给按钮添加点击事件
  button.onclick = () => {
  
    const text = JSON.stringify(data.value)
    
    if(type === 'blob'){
    
      const blob = new Blob([text], {
      
        type: "text/plain;charset=utf-8"
        
      })
      
    }else if(type === 'json'){
    
      const blob = new Blob([text], {
      
	type: 'application/json'
        
      })
      
    }else if(type === 'markdown'){
    
      const blob = new Blob([text], {
      
	type: 'text/markdown'
        
      })
      
    }
    
    // 根据 blob生成 url链接
    const objectURL = URL.createObjectURL(blob)
    
    const domElement = document.createElement('a')
    
    domElement.href = objectURL
    
    domElement.download = filename 
    
    domElement.click()
    
    URL.revokeObjectURL(objectURL)
    
  }
}