直接下載下載圖片、pdf等文件，無預(yù)覽過程
直接使用window.open()或window.locat.href()下載文件遇到圖片或pdf文件就會跳轉(zhuǎn)預(yù)覽頁，不能滿足我想要的點擊直接下載文件到本地的需求，嘗試多次，最終通過以下方法實現(xiàn)了我的需求。文章來源地址http://www.zghlxwxcb.cn/news/detail-535727.html
- 鑒于后端返回的是文件路徑，首先要將文件url地址轉(zhuǎn)為文件對象，代碼如下：
downloadUrlFile (url, fileName) {
return new Promise((resolve, reject) => {
var blob = null
var xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.responseType = "blob"
// 加載時處理
xhr.onload = () => {
// 獲取返回結(jié)果
blob = xhr.response
let file = new File([blob], fileName, { type: 'image/png' })
// 返回結(jié)果
resolve(file)
}
xhr.onerror = (e) => {
reject(e)
}
// 發(fā)送
xhr.send()
})
},
-
npm install saveAs --save,使用file-saver導(dǎo)出并下載文件
async download (item) {
const { file, file_url, name } = item
// 由于直接用后端返回的完成路徑http://xxxx 會出現(xiàn)跨域問題，后端返回的還有一個文件路徑，此處'api/'是本地為解決跨域問題而配置的代理,與文件路徑拼接就不會出現(xiàn)跨域問題了
const files = await this.downloadUrlFile('api/' + file, name)
saveAs(new Blob([files], { type: 'text/plain;charset=UTF-8' }), name)
},
文章來源：http://www.zghlxwxcb.cn/news/detail-535727.html
到了這里，關(guān)于js下載圖片、pdf等文件，無預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
