更改javascript/jquery中的内容类型以在iframe中显示azure blob文档 [英] Change content type in javascript/jquery to display a azure blob document in iframe

问题描述

大家好，

我想将我的天蓝色Blob文档显示到iframe中.问题是，天蓝色blob中所有文档的内容类型都是application/octet-stream类型.因此，Google Chrome浏览器中的iframe会下载文件，而不是显示在iframe弹出窗口中.这 在Google Chrome浏览器中，下载行为很明显，因为内容类型是application/octet-streamtype，因此它不像Internet Explorer那样聪明，无法获取实际的文件内容类型，因此它仅下载文件.

I want to display my azure blob document into iframe. The issue is that the content type for all the documents in the azure blob is application/octet-stream type. So the iframe in Google Chrome downloads the file rather than showing into iframe popup. The download behavior is obvious in Google Chrome as the content type is application/octet-streamtype so its not smart enough like Internet Explorer to get the actual file content type so its simply downloads the file. 

现在，我的问题是如何更改客户端javascript中azure blob文件的内容类型，以便它在弹出iframe中打开.我不想在天蓝色的Blob throgh代码中更改文件的内容类型.我只想在客户端更改 并在iframe中渲染.如果您还有其他问题，请告诉我.我在iframe中显示pdf文件的代码如下:

Now my question is how can i change the content type in of the azure blob file in javascript in client side so that it opens in pop up iframe. I dont want to change the content type of the file in azure Blob throgh code. I just want to chnage in client side and render in iframe. please let me know if you have any other question. My code to diplay pdf file in iframe is as below:

function GetFileHTML(path) { // Note: path is the blob file name with sastoken
            debugger;
            if (path !== null) {

                var pathLower = path.toLowerCase();
                var fileContainherHTML;

                if(pathLower.indexOf(".pdf") >= 0){fileContainerHTML = `<object class="file-container" data="${path}" type="application/pdf"><iframe class="file-container" src="${path}" type="application/pdf">This browser does not support PDFs. Please download the XML to view it: <a href="${path}">Download PDF</a>"</iframe></object>`;}
               
                else if (pathLower.includes(".xml")) {
                    fileContainerHTML =
                        '<iframe class="file-container" src="${path}" type="text/xml">This browser does not support XMLs. Please download the XML to view it: <a href="${path}">Download XML</a>"</iframe>';
                }
                else if (pathLower.includes(".htm")) {
                    var srcPrefixArr = result.metadata_storage_path.split('/');
                    srcPrefixArr.splice(-1, 1);
                    var srcPrefix = srcPrefixArr.join('/');

                    var htmlContent = result.content.replace(/src=\"/gi, 'src="${srcPrefix}/');

                    fileContainerHTML =
                        '${htmlContent}';
                }
                else if (pathLower.includes(".mp3")) {
                    fileContainerHTML =
                        '<audio controls><source src="${path}" type="audio/mp3">Your browser does not support the audio tag.</audio>';
                }
                else if (pathLower.includes(".mp4")) {
                    fileContainerHTML =
                        '<video controls class="video-result"><source src="${path}" type="video/mp4">Your browser does not support the video tag.</video>';
                }
                else if (pathLower.includes(".doc") || pathLower.includes(".ppt") || pathLower.includes(".xls")) {
                    var src = "https://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent(path);

                    fileContainerHTML =
                        '<iframe class="file-container" src="${src}"></iframe>';
                }
                else {
                    fileContainerHTML =
                        '<div>This file cannot be previewed. Download it here to view: <a href="${path}">Download</a></div>';
                }
            }
            else {
                fileContainerHTML =
                    '<div>This file cannot be previewed or downloaded.';
            }

            return fileContainerHTML;
        }

推荐答案

content-type是响应头的一部分，很遗憾，您将无法在JavaScript中进行更改为您的目的.

The content-type is part of the response header and unfortunately you won't be able to change that in JavaScript for your purpose.

我不是chrome扩展程序开发专家，但也许您可以考虑使用浏览扩展程序来修改内容类型.

I am not and expert in chrome extensions development but perhaps you can look into modifying the content-type using a browse extension.

尊敬的

古斯塔沃·洛佩兹(Gustavo Lopez).

Gustavo Lopez. 

这篇关于更改javascript/jquery中的内容类型以在iframe中显示azure blob文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！