window.open配合document.write实现图片预览而非下载

牧杉-惊蛰

已于 2023-07-13 19:48:30 修改

阅读量1.4k

点赞数

文章标签： html5 javascript chrome css 前端框架前端 html

于 2023-07-12 16:13:10 首次发布

本文链接：https://blog.csdn.net/m0_63026408/article/details/131677327

版权

该博文介绍了如何利用JavaScript的window.open方法和document.write方法，在新窗口中动态创建HTML内容，从而实现对PNG和JPG等图片的预览功能。文章详细讲解了window.open的参数以及document.write的用法，并给出了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果想和预览pdf一样预览其他图片，那么请看我的另一篇博文：（这篇主要是介绍了window.open配合document.write将图片写入页面）

https://blog.csdn.net/m0_63026408/article/details/131443274?spm=1001.2014.3001.5502

文章目录

概要

点击事件后要打开新窗口预览图片（png，jpg--图片类型不是pdf或者文档）

整体架构流程

1：window.open语法：

window.open(URL,name,specs,replace)

2：document.write():将内容写到指定文档中

语法

document.write(exp1,exp2,exp3,...)

技术名词解释

1：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

属性	值	描述
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');

2：document.write():将内容写到指定文档中

实例：

//向文档写入一些 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>"
)

技术细节

提示：这里可以添加技术细节

window.open()方法与document.write()方法结合

小结

提示：这里可以添加总结

//点击事件
openNewPageHttk(){
      let newImgSrc=(window.location.origin.indexOf('localhost') > -1?
              'http://58.34.94.186:2184': window.location.origin) +
              '/secdt-api/sys/file/download?filePath='+
                this.httk+'&_sgk='+getToken();
        window.open('','','').document.write(`<!DOCTYPE html>
          <html>
            <body 
                style="display: flex;
                justify-content: center;
                align-items: center;">
              <img src='${newImgSrc}' width="90%"/>
            </body>
          </html>`
        )
    },