一、问题
- 多个 图片 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)