jsでファイルをローカルに保存します

ネイティブメソッドを使用してファイルをローカルに保存します

基本的なプロセス

• 保存するテキスト、保存形式、保存ファイルの種類を決定します。
• 保存形式に従ってurlリンク、ファイルのダウンロード アドレスを設定します。
• 1 つ作成します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)
    
  }
}