javascript - 如何使用 Vue.js 下载图像而不显示它们?
问题描述
在我的 Vue.js 应用程序中,我希望在单击按钮时强制浏览器下载图像而不显示它。
按照这个答案,我想出了这个解决方案:
<span @click="downloadImg(remoteURL)">
Download Image
</span>
和方法:
downloadImg(url) {
console.log('downloading', url);
document.execCommand('SaveAs',true, url);
},
remoteURL
实际上是一个小函数,它生成这样的 url:
remoteURL(link) {
return this.BASE_URL+ link //link is the image's path fetched from database
},
但是当我点击Download Image
什么都没有发生。
这个问题不相关,因为我不想只是Download image with JavaScript
. 我想要的是安静地下载图像,即不显示图像。
我该如何解决?
解决方案
我创建了一个基于blob
. blob
首先,我使用图像创建了一个url
。加载图像 blob 后,我调用从FileSaversaveAs
中提取的方法以安静地获取 blob。
let vm = new Vue({
el: '#vue-instance',
data: {
link: 'https://i.imgur.com/lF1GKDt.jpg',
},
created() {
this.remoteURL();
},
methods: {
downloadImg() {
let url = this.remoteURL();
fetch(url)
.then((response) => response.blob())
.then((blob) => {
saveAs(blob, 'image_name.jpg');
});
console.log('downloading', url);
},
remoteURL() {
//return this.BASE_URL + link //link is the image's path fetched from database
return this.link;
},
}
});
var _global = typeof window === 'object' && window.window === window ?
window : typeof self === 'object' && self.self === self ?
self : typeof global === 'object' && global.global === global ?
global :
this
function bom(blob, opts) {
if (typeof opts === 'undefined') opts = {
autoBom: false
}
else if (typeof opts !== 'object') {
console.warn('Deprecated: Expected third argument to be a object')
opts = {
autoBom: !opts
}
}
// prepend BOM for UTF-8 XML and text/* types (including HTML)
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
return new Blob([String.fromCharCode(0xFEFF), blob], {
type: blob.type
})
}
return blob
}
function download(url, name, opts) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.onload = function() {
saveAs(xhr.response, name, opts)
}
xhr.onerror = function() {
console.error('could not download file')
}
xhr.send()
}
function corsEnabled(url) {
var xhr = new XMLHttpRequest()
// use sync to avoid popup blocker
xhr.open('HEAD', url, false)
xhr.send()
return xhr.status >= 200 && xhr.status <= 299
}
// `a.click()` doesn't work for all browsers (#465)
function click(node) {
try {
node.dispatchEvent(new MouseEvent('click'))
} catch (e) {
var evt = document.createEvent('MouseEvents')
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
20, false, false, false, false, 0, null)
node.dispatchEvent(evt)
}
}
var saveAs = _global.saveAs || (
// probably in some web worker
(typeof window !== 'object' || window !== _global) ?
function saveAs() { /* noop */ }
// Use download attribute first if possible (#193 Lumia mobile)
:
'download' in HTMLAnchorElement.prototype ?
function saveAs(blob, name, opts) {
var URL = _global.URL || _global.webkitURL
var a = document.createElement('a')
name = name || blob.name || 'download'
a.download = name
a.rel = 'noopener' // tabnabbing
// TODO: detect chrome extensions & packaged apps
// a.target = '_blank'
if (typeof blob === 'string') {
// Support regular links
a.href = blob
if (a.origin !== location.origin) {
corsEnabled(a.href) ?
download(blob, name, opts) :
click(a, a.target = '_blank')
} else {
click(a)
}
} else {
// Support blobs
a.href = URL.createObjectURL(blob)
setTimeout(function() {
URL.revokeObjectURL(a.href)
}, 4E4) // 40s
setTimeout(function() {
click(a)
}, 0)
}
}
// Use msSaveOrOpenBlob as a second approach
:
'msSaveOrOpenBlob' in navigator ?
function saveAs(blob, name, opts) {
name = name || blob.name || 'download'
if (typeof blob === 'string') {
if (corsEnabled(blob)) {
download(blob, name, opts)
} else {
var a = document.createElement('a')
a.href = blob
a.target = '_blank'
setTimeout(function() {
click(a)
})
}
} else {
navigator.msSaveOrOpenBlob(bom(blob, opts), name)
}
}
// Fallback to using FileReader and a popup
:
function saveAs(blob, name, opts, popup) {
// Open a popup immediately do go around popup blocker
// Mostly only available on user interaction and the fileReader is async so...
popup = popup || open('', '_blank')
if (popup) {
popup.document.title =
popup.document.body.innerText = 'downloading...'
}
if (typeof blob === 'string') return download(blob, name, opts)
var force = blob.type === 'application/octet-stream'
var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)
if ((isChromeIOS || (force && isSafari)) && typeof FileReader === 'object') {
// Safari doesn't allow downloading of blob URLs
var reader = new FileReader()
reader.onloadend = function() {
var url = reader.result
url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
if (popup) popup.location.href = url
else location = url
popup = null // reverse-tabnabbing #460
}
reader.readAsDataURL(blob)
} else {
var URL = _global.URL || _global.webkitURL
var url = URL.createObjectURL(blob)
if (popup) popup.location = url
else location.href = url
popup = null // reverse-tabnabbing #460
setTimeout(function() {
URL.revokeObjectURL(url)
}, 4E4) // 40s
}
}
)
_global.saveAs = saveAs.saveAs = saveAs
if (typeof module !== 'undefined') {
module.exports = saveAs;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-instance">
<span @click="downloadImg()">Download Image</span>
</div>
更新:
我删除了 jQuery 和 FileSaver 并改编了一个香草版本。
推荐阅读
- r - R 的 data.table 因大数据的因子子集而崩溃
- sql - SQL Server 中的行级动态数据屏蔽
- java - 为什么我的第 50000 个数字的 BigInteger 斐波那契数与本网站不匹配?
- powershell - Powershell 函数调用在 Windows 10 上使用 powershell v7 导致缺少函数错误
- c# - 列表
> 除了()列表 > 比较 HashSet 列表 - firebase - Firebase 身份验证 - 如何更改自定义域
- python - 在pygame中沿x轴拖动对象
- c - 运行 10 秒的 while 循环
- powershell - 如何从 Powershell 在 VM 中运行 .bat 文件
- php - 基于产品 ID 的 WooCommerce 批量折扣