【已解决】window.open实现图片预览而非下载

简介: window.open实现图片预览而非下载

一、问题

  • 多个 图片 url (用逗号分隔开)
  • 图片 url 打开预览而非直接下载

二、解决

let imgs = row.url.split(',').filter(i => !!i)
let a = window.open('')
imgs.forEach((item, index) => {
  // window.open(item, `img${index}`) // 尝试失败
  a.document.write(`<!DOCTYPE html><html><body ><img src='${item}'/></body></html>`)
})

实际项目中最终使用了图片预览的组件。。。

三、其他尝试

在了解到 Content-Disposition 属性的限制之前,有尝试过使用 window.open() 的第二个参数 name 不同而同时启动多个下载。。。


参考资料:

相关文章
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
2041 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
5月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
159 0
|
5月前
|
JavaScript 前端开发 UED
使用window.open打开新窗口的参数设置
使用window.open打开新窗口的参数设置
|
6月前
|
前端开发 JavaScript UED
window.open()用法详解
window.open()用法详解
|
7月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
126 0
|
7月前
|
JavaScript
window.open的使用
window.open的使用
129 0
|
移动开发 安全 JavaScript
H5的新特性-使用a标签,download属性下载图片
H5的新特性-使用a标签,download属性下载图片
390 0
|
小程序 前端开发 UED
wx-open-launch-weapp 样式问题
wx-open-launch-weapp 样式问题
889 0
wx-open-launch-weapp 样式问题