一、问题
- 多个 图片 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 不同而同时启动多个下载。。。
参考资料：
- [Content-Disposition 响应头，设置文件在浏览器打开还是下载]：(https://blog.csdn.net/ssssny/article/details/77717287)
- [利用window.open实现阻止图片下载]：(https://blog.csdn.net/THEANARKH/article/details/51951570)
- [window.open() 一次打开多个页面]：(https://blog.csdn.net/Tayshin/article/details/73614854)
四、拓展学习
1.window.open
打开一个窗口
语法
window.open(URL,name,specs,replace)
- 参数：URL
- 打开指定URL的页面。如果没有指定URL，打开一个新的空白窗口
- 参数：name
- _blank（默认）：URL加载到一个新的窗口；
- _parent：URL加载到父框架；
- _self：URL替换当前页面；
- _top：URL替换任何可加载的框架集；
- name：窗口名称（打开方式按默认来）
- 参数：specs
窗口属性：
.
属性 值 描述 width pixels 窗口的宽度.最小.值为100 height pixels 窗口的高度。最小值为100 top pixels 窗口顶部的位置. left pixels 窗口与屏幕左侧的距离 location yes|no|1|0 是否显示地址字段.默认值是yes menubar yes|no|1|0 是否显示菜单栏.默认值是yes resizable yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars yes|no|1|0 是否显示滚动条.默认值是yes status yes|no|1|0 是否要添加一个状态栏.默认值是yes titlebar yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar yes|no|1|0 是否显示浏览器工具栏.默认值是yes
- 参数：replace
在浏览历史中新建，还是替换当前记录：
- true：替换当前记录。
- false：新建记录。
实例
- 在新窗口中打开 www.baidu.com ：
window.open("https://www.baidu.com");
- 在一个新窗口打开一个 window 空白页：
window.open('','','width=200,height=100')
- 在一个新窗口打开一个 textarea：
window.open('','','width=500,height=300,top=100,left=600').document.write("<h1>这是'我的窗口'</h1><textarea style='width:460;height:220'>临时记事</textarea>")
- 定位到已打开的且已命名的指定窗口
window.open('https://www.baidu.com', 'baidu')
window.open('', 'baidu');
- [Window.open() - Web API 接口参考 | MDN]：(https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open)
2.document.write
将内容写到指定文档中
语法
document.write(exp1,exp2,exp3,...)
所有内容将按出现的顺序被追加到文档中
实例
- 向文档写入一些 HTML 代码和文本：
document.write("<h1>Main title</h1>")
直接在控制台输入将替换本地缓存中已载入的的页面内容
- 与
window.open连用在一个新窗口打开一个 textarea：
window.open('','','width=500,height=300,top=100,left=600').document.write("<h1>这是'我的窗口'</h1><textarea style='width:460;height:220'>临时记事</textarea>")
[document.write - Web API 接口参考 | MDN]：(https://developer.mozilla.org/zh-CN/docs/Web/API/document/write)