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)
    
  }
}