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

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

【JavaScript】WEB純JS前端實(shí)現(xiàn)文件下載,批量下載

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

1.單個(gè)下載

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

1.1 使用 location.href

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

window.location.href = url;

1.2 使用 window.open

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

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

// 多個(gè)文件下載時(shí)禁止打開新窗口

window.open(url, true)

1.3 使用 a 標(biāo)簽

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

方式一:

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

方式二:

const download = (filename, url) => {

    let a = document.createElement('a')

    a.style = 'display: none' // 創(chuàng)建一個(gè)隱藏的a標(biāo)簽

    a.download = filename

    a.href = url

    document.body.appendChild(a)

    a.click() // 觸發(fā)a標(biāo)簽的click事件

    document.body.removeChild(a)

}

1.4使用Blob實(shí)現(xiàn)(可能有空白或亂碼問題)

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編碼數(shù)據(jù)

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

    let event = new MouseEvent('click') // 創(chuàng)建一個(gè)單擊事件

    a.download = filename || '圖片' // 設(shè)置圖片名稱

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

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

  }

  image.src = url

}

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

// 單個(gè)下載各類型文件

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

   })

 },

// 發(fā)送請求

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++) {

       // 調(diào)用單個(gè)下載方法

      this.downloadFile(fileList[i])

   }

 }


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