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


参考资料:

相关文章
uni-app项目配置手机端底部的tab栏(一)
uni-app项目配置手机端底部的tab栏(一)
1277 0
|
NoSQL Redis Docker
【从零开始】Docker Desktop:听说你小子要玩我
本文旨在帮助读者重新掌握Docker知识,特别是在Windows 10环境下安装与使用Docker Desktop的过程。文章详细介绍了从下载安装到配置镜像源的具体步骤,并通过Redis实例演示了如何拉取镜像和启动容器。
8332 1
【从零开始】Docker Desktop:听说你小子要玩我
|
移动开发 Android开发 iOS开发
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
uniapp开发H5及app监听返回事件(以及监听不到的处理方法)
3191 0
|
JavaScript 前端开发
js获取url参数值的几种方式
js获取url参数值的几种方式
2531 157
|
JSON 数据格式
解决报错TypeError: Converting circular structure to JSON --> starting at object with constructor
解决报错TypeError: Converting circular structure to JSON --> starting at object with constructor
|
机器学习/深度学习 前端开发 JavaScript
WebAssembly:让前端性能突破极限的秘密武器
WebAssembly(简称 WASM)作为前端开发的性能加速器,能够让代码像 C++ 一样在浏览器中高速运行,突破了 JavaScript 的性能瓶颈。本文详细介绍了 WebAssembly 的概念、工作原理以及其在前端性能提升中的关键作用。通过与 JavaScript 的配合,WASM 让复杂运算如图像处理、3D 渲染、机器学习等在浏览器中流畅运行。文章还探讨了如何逐步集成 WASM,展示其在网页游戏、高计算任务中的实际应用。WebAssembly 为前端开发者提供了新的可能性,是提升网页性能、优化用户体验的关键工具。
7195 2
WebAssembly:让前端性能突破极限的秘密武器
|
JavaScript 测试技术
vue配置生产环境.env.production、测试环境.env.development
该文章介绍了如何在Vue项目中配置和使用不同的环境变量文件(.env、.env.production、.env.development)以适应开发、测试和生产环境,并通过修改`package.json`中的scripts来实现不同环境的打包。
4149 0
vue配置生产环境.env.production、测试环境.env.development
|
JavaScript
vite-plugin-html的使用及实现
【8月更文挑战第4天】vite-plugin-html的使用及实现(实现一个简易版的插件)
1640 4
elementUI引用el-image-viewer组件全局方法预览大图
elementUI引用el-image-viewer组件全局方法预览大图
|
前端开发
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
uniapp 实战 -- app 的自动升级更新(含生成 app 发布页)
3697 1

热门文章

最新文章