在Chrome中保存另存为对话框

问题描述

如果我制作Chrome扩展程序，如果服务器强制执行另存为...对话框，如何在新选项卡中打开图像？正如我所看到的，这是关于 Content-Disposition 标题属性的内容。

有几十个关于如何强制的服务器端Q / A浏览器打开那个对话框，但我找不到任何东西，如何与最终用户打交道，谁不想要那个对话窗口。

解决方案

在的扩展BNF符号中，Content-Disposition
标题字段的定义如下：

  disposition：=Content-Disposition： 
处置型
 *（;处置 -  parm）
 
处置型：=inline
 /附件
 /扩展令牌
;值不区分大小写
 
 disposition-parm：= filename-parm / parameter 
 
 filename-parm：=filename=value; 
  

如果忽略处置参数，它会执行以下操作。

content-disposition，attachment; filename = fname.jpeg
可以下载jpeg文件。

content-disposition，inline; filename = fname.jpeg
显示jpeg文件而不是下载jpeg文件它会被送达。

这种行为取决于浏览器和您正在尝试提供的文件。例如，如果你有一个JPEG文件，内嵌的 disposition-type 会在浏览器中打开Image，而如果您使用.ZIP文件，浏览器将无法以内联方式显示它，因此对于内联和附件 disposition-type ，文件将被下载。

您必须使用 WebRequest API ，修改您的标题

示例代码

  chrome.webRequest.onBeforeSendHeaders.addListener（
 
 function（details）{//修改头文件
 details.requestHeaders.push（{
name：content-disposition ，
value：inline; filename =`_some_filename.some_extension`
}）; 
 return {//更新头文件
 requestHeaders：details.requestHeaders 
 }; 
} {
 urls：[< all_urls>] 
}，[blocking，requestHeaders]）; //阻止请求
  

请确保您声明

 权限：[
您的清单中的webRequest，
webRequestBlocking
] 
  

文件

引用

编辑1

为此代码添加您的网址，并检查它是否仍然会将保存为对话框。

  chrome.webRequest.onHeadersReceived.addListener（
 
函数（详情）{
 
 var _content_to_append = {
name：content-disposition，
value：inline
}; 
 details.responseHeaders.push（_content_to_append）; 
 return {
 responseHeaders：details.responseHeaders 
}; 
}，{
 urls：[< all_urls>] 
}，[blocking，responseHeaders]）; 
  

If I'm making a Chrome Extension, how do I open an image in a new tab, if server forces the "Save as..." dialog? As I can see, it is something about the Content-Disposition header property.
There are dozens of server-side Q/A about how to force browser to open that dialog, but I can't find nothing, how to fight with that as an end-user, who doesn't want that dialog window.

解决方案

In the extended BNF notation of [RFC 822], the Content-Disposition header field is defined as follows:

    disposition := "Content-Disposition" ":"
                   disposition-type
                   *(";" disposition-parm)

    disposition-type := "inline"
                      / "attachment"
                      / extension-token
                      ; values are not case-sensitive

    disposition-parm := filename-parm / parameter

    filename-parm := "filename" "=" value;

If ignoring disposition parameters it simply does the following.

"content-disposition","attachment; filename=fname.jpeg"downloads jpeg file when ever it is served.

"content-disposition","inline; filename=fname.jpeg"displays jpeg file rather downloading jpeg file when ever it is served.

This behavior depends on the browser and the file you are trying to serve.

For example, if you have a JPEG file an inline disposition-type will open the Image within browser, whereas attachment will force it to download.

If you're using a .ZIP file, browsers won't be able to display it inline, so for inline and attachment disposition-type, the file will be downloaded.

You have to use WebRequest API, to modify your headers

Sample Code

chrome.webRequest.onBeforeSendHeaders.addListener(

function (details) {//Modify Headers
    details.requestHeaders.push({
        "name": "content-disposition",
        "value": "inline; filename=`_some_filename.some_extension`"
    });
    return {//Update Headers
        requestHeaders: details.requestHeaders
    };
}, {
    urls: ["<all_urls>"]
}, ["blocking", "requestHeaders"]);//Block the requests

Make sure you declare

"permissions": [
    "webRequest",
    "webRequestBlocking"
  ]

in your manifest file

References

• Web Request API

EDIT 1

Add your URL for this code and check if it still throws a save as dialog.

chrome.webRequest.onHeadersReceived.addListener(

function (details) {

    var _content_to_append = {
        "name": "content-disposition",
        "value": "inline"
    };
    details.responseHeaders.push(_content_to_append);
    return {
        responseHeaders: details.responseHeaders
    };
}, {
    urls: ["<all_urls>"]
}, ["blocking", "responseHeaders"]);

这篇关于在Chrome中保存另存为对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！