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


参考资料:

相关文章
|
移动开发 Android开发 iOS开发
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
3525 0
|
开发工具 git
Git从远程仓库拉取指定的分支
Git从远程仓库拉取指定的分支
5351 0
|
存储
base64图片是什么?原理、优缺点是什么?
base64图片是什么?原理、优缺点是什么?
1088 0
|
JSON 数据格式
解决报错TypeError: Converting circular structure to JSON --> starting at object with constructor
解决报错TypeError: Converting circular structure to JSON --> starting at object with constructor
|
JavaScript 前端开发
js获取url参数值的几种方式
js获取url参数值的几种方式
2776 157
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
28282 154
|
Web App开发 JavaScript 前端开发
正确开启vue3.0调试工具vue-devtools
正确开启vue3.0调试工具vue-devtools
8014 2
|
机器学习/深度学习 前端开发 JavaScript
WebAssembly:让前端性能突破极限的秘密武器
WebAssembly(简称 WASM)作为前端开发的性能加速器,能够让代码像 C++ 一样在浏览器中高速运行,突破了 JavaScript 的性能瓶颈。本文详细介绍了 WebAssembly 的概念、工作原理以及其在前端性能提升中的关键作用。通过与 JavaScript 的配合,WASM 让复杂运算如图像处理、3D 渲染、机器学习等在浏览器中流畅运行。文章还探讨了如何逐步集成 WASM,展示其在网页游戏、高计算任务中的实际应用。WebAssembly 为前端开发者提供了新的可能性,是提升网页性能、优化用户体验的关键工具。
8226 2
WebAssembly:让前端性能突破极限的秘密武器
|
JavaScript
解决报错did you register the component correctly? For recursive components, make sure to provide the “na
解决报错did you register the component correctly? For recursive components, make sure to provide the “na
|
存储 JavaScript UED
在 Vue 组件中动态切换全局样式
【10月更文挑战第5天】
415 1