在新标签中全屏显示图像

Posted 2023-03-15

【中文标题】在新标签中全屏显示图像

【英文标题】：Displaying an image in full screen in new tab

【发布时间】：2019-11-23 12:38:36

【问题描述】：

我正在尝试将我的后端提供的 PDF 和 JPG 文件显示到用户 Web 浏览器内的新选项卡中。下面的代码非常适用于 PDF 文件（在新选项卡中打开它们并具有可调整的大小），但它会自动下载 JPG 文件。

我已经研究过嵌入图像并将它们全屏显示在新选项卡以及一些反应包中，但我很想知道是否有更好的方法来做到这一点

openFile(file) 
  var url = url/path/to/backend/request;
  window.open(url, this.state.song.Title)

如何强制 JPG 文件像 PDF 文件一样显示在新选项卡中？

【参考方案1】：

一方面，window.open() 是一种卑鄙的方法：它绕过了正常的浏览器导航系统，所以你真的想用target="_blank" 构建一个a，它会做同样的事情，而尊重用户。

（将其样式设置为display:none，记得添加到文档中，然后调用a.click()，然后再次删除）

也就是说，浏览器会根据 mime 类型决定是显示还是下载，因此请确保您的服务器以适当的 mime 类型响应您希望用户在浏览器中看到而不是下载的文件（例如，不要t 用application/octet-stream 发送图片）

【参考方案2】：

window.open应该可以正常工作，如果下载文件，请检查您的url的响应头Content-Type是否设置正确，应该是image/jpeg或image/png等，这取决于您的图像格式.

您可以在终端中使用curl 或使用chrome 开发工具找到它。如果您使用curl，请尝试运行curl -I -X GET "your image url" 以找出您的响应标头。你应该得到这样的输出：

HTTP/2 200
server: nginx/1.12.2
date: Sun, 14 Jul 2019 16:26:25 GMT
content-type: image/svg+xml
content-length: 5501

【讨论】：

这是image/jpeg 不是jpg，我修正了错字。