在浏览器中打开文件时重命名文件答案

【问题标题】：Renaming a file while opening in browser在浏览器中打开文件时重命名文件
【发布时间】：2017-06-11 17:41:12
【问题描述】：

我有如下要求。我使用 AngularJS、JavaScript。 1. 用户在浏览器中点击一个文档。我得到文档路径并打开它。 >> window.open(文档路径); 2.但是保存在目录中的文档文件名被替换为Id，没有扩展名。 abc/文件/4 3. 实际文件名在 DB 中为 Id: 4 Filename: Hello.pdf

所以当我打开文件时，我得到 abc/files/4 里面没有格式并且它没有打开文件。

如何打开名称正确的文件 abc/files/Hello.pdf？

1st，我想采用路径 abc/files/4 并且我不想下载文件。只需将其存储在本地某个地方，如 cache/Temp 以获取文件内容并将 4 重命名为 Hello.pdf，然后在浏览器中打开它。所有这些都应该在后台发生，并且应该在用户单击文件时正确打开文件。

是否可以使用 JavaScript、AngularJS？请告诉我

【问题讨论】：

您不想下载文件而是将其存储在文件夹中？那就是下载。

标签： javascript file

【解决方案1】：

出于安全原因，JavaScript 通常无法访问本地文件系统。

您必须做的是将文件名与您的 HTTP 响应一起传递。为此，请将此标头添加到响应中：

Content-Disposition: inline; filename="Hello.pdf"

另见：

【讨论】：

【解决方案2】：

这将允许您使用异步请求下载文件并在 base64 编码的数据 url 中打开它。它不会设置名称，只需强制显示为 pdf。如果您无法访问您的服务器并且无法实现更好的 Aaron Digulla 方法，则可以使用此方法。

/**
 *
 * jquery.binarytransport.js
 *
 * @description. jQuery ajax transport for making binary data type requests.
 * @version 1.0
 * @author Henry Algus <henryalgus@gmail.com>
 *
 */
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {
  // check for conditions and support for blob / arraybuffer response type
  if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
    return {
      // create new XMLHttpRequest
      send: function(headers, callback) {
        // setup all variables
        var xhr = new XMLHttpRequest(),
          url = options.url,
          type = options.type,
          async = options.async || true,
          // blob or arraybuffer. Default is blob
          dataType = options.responseType || "blob",
          data = options.data || null,
          username = options.username || null,
          password = options.password || null;

        xhr.addEventListener('load', function() {
          var data = {};
          data[options.dataType] = xhr.response;
          // make callback and send data
          callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
        });

        xhr.open(type, url, async, username, password);

        // setup custom headers
        for (var i in headers) {
          xhr.setRequestHeader(i, headers[i]);
        }

        xhr.responseType = dataType;
        xhr.send(data);
      },
      abort: function() {}
    };
  }
});

var blobToBase64 = function(blob, cb) {
  var reader = new FileReader();
  reader.onload = function() {
    var dataUrl = reader.result;
    var base64 = dataUrl.split(',')[1];
    cb(base64);
  };
  reader.readAsDataURL(blob);
};

$.ajax("Description.pdf", {
  dataType: "binary"
}).done(function(data) {
  blobToBase64(data, function(base64encoded) {
    window.open("data:application/pdf;base64," + base64encoded);
  });
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我不想将文件格式默认为 pdf。我想从 DB 中获取实际的文件名和格式，并重命名返回的实际文件。