狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【JavaScript】WEB純JS前端實現文件下載,批量下載

admin
2023年8月24日 21:49 本文熱度 683

1.單個下載

常見的有 txt、png、jpg、zip、tar 等各種文件格式,一部分瀏覽器是會直接打開鏈接顯示內容的;而另外一部分,瀏覽器不識別響應頭或者不能解析對應的格式,會當做文件直接下載下來了。如:

1.1 使用 location.href

// 適用于瀏覽器無法識別文件,如果是html、jpg、pdf等會直接解析展示,而不會下載

window.location.href = url;

1.2 使用 window.open

// 適用于瀏覽器無法識別文件,如果是html、jpg、pdf等會直接解析展示,而不會下載

window.open("http://barretlee.com/test.rar")

// 多個文件下載時禁止打開新窗口

window.open(url, true)

1.3 使用 a 標簽

// 適用于單文件下載或需要自定義文件名稱,可下載各種類型,圖片等會直接解析展示,不會下載

方式一:

<a href="http://barretlee.com/test.rar" download="test.rar" >下載</a>

方式二:

const download = (filename, url) => {

    let a = document.createElement('a')

    a.style = 'display: none' // 創建一個隱藏的a標簽

    a.download = filename

    a.href = url

    document.body.appendChild(a)

    a.click() // 觸發a標簽的click事件

    document.body.removeChild(a)

}

1.4使用Blob實現(可能有空白或亂碼問題)

export function download (filename, url) {

  let fileName = `${filename}.jpg`

  let myBlob = new Blob([url], { type: 'image/jpeg' })

  let link = document.createElement('a')

  link.href = URL.createObjectURL(myBlob)

  link.download = fileName

  link.click()

  link.remove()

  URL.revokeObjectURL(link.href)

}

2.支持圖片下載

export function download (filename, url) {

  let image = new Image()

  // 解決跨域 Canvas 污染問題

  image.setAttribute('crossOrigin', 'anonymous')

  image.onload = function () {

    let canvas = document.createElement('canvas')

    canvas.width = image.width

    canvas.height = image.height

    let context = canvas.getContext('2d')

    context.drawImage(image, 0, 0, image.width, image.height)

    let url = canvas.toDataURL('image/png') // 得到圖片的base64編碼數據

    let a = document.createElement('a') // 生成一個a元素

    let event = new MouseEvent('click') // 創建一個單擊事件

    a.download = filename || '圖片' // 設置圖片名稱

    a.href = url // 將生成的URL設置為a.href屬性

    a.dispatchEvent(event) // 觸發a的單擊事件

  }

  image.src = url

}

3.支持各類型下載,批量下載

// 單個下載各類型文件

downloadFile (row) {

   this.downloadBatch(row.filePath, (obj) => {

     let a = document.createElement('a')

     let url = URL.createObjectURL(obj)

     a.href = url

     a.download = row.fileName

     a.click()

   })

 },

// 發送請求

downloadBatch (file, callback) {

  let request = new XMLHttpRequest()

  request.responseType = 'blob'

  request.open('GET', file)

  request.addEventListener('load', function () {

    callback(request.response)

  })

  request.send()

},

// 批量下載

downloadAll () {

    for (let i = 0; i < fileList.length; i++) {

       // 調用單個下載方法

      this.downloadFile(fileList[i])

   }

 }


該文章在 2023/8/24 21:53:53 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved