【已解决】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 不同而同时启动多个下载。。。


参考资料:

相关文章
|
API
uni-app点击按钮显示 loading 提示框-uni.showLoading(OBJECT)
uni-app点击按钮显示 loading 提示框-uni.showLoading(OBJECT)
398 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
2168 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
移动开发 缓存 JavaScript
微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)
微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)
2482 0
微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)
|
8月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
153 1
使用 JS 实现在浏览器控制台打印图片 console.image()
|
7月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
182 0
|
7月前
|
JavaScript 前端开发 UED
使用window.open打开新窗口的参数设置
使用window.open打开新窗口的参数设置
|
小程序 前端开发 UED
wx-open-launch-weapp 样式问题
wx-open-launch-weapp 样式问题
907 0
wx-open-launch-weapp 样式问题
|
API 小程序
微信小程序navigator的open-type跳转问题
navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab',对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能 open-type="navigate"等价于API的 wx.
3898 0