使用 JavaScript 的 HTTP POST 的可下载数据 link

Question

我有一个使用图像的 HTTP POST REST 端点和 returns 一个包含图像像素数据的 HTML 文档。 HTTP 响应包括 header Content-Disposition: 附件； filename=Pixels.html 这样浏览器会提示下载。

我想要一个 HTML/JavaScript（不是 jQuery）应用

允许我浏览和选择图像（例如，<input id="fid" name="fid" type="file" />
单击 link post 图像数据到端点，让我将 HTML 内容下载到磁盘（例如 <p onclick="javascript: getPixels()">Get Pixels</p>）。

我该怎么做？我尝试了以下代码：

  function getPixels() {
     var input = document.getElementById("fid");
     if (input.files && input.files[0]) {
        if (typeof (FileReader) != "undefined") {
           var reader = new FileReader();
           reader.onload = function (e) {
              var imgData = e.target.result;
              var postUrl = "./GetPixelsService.svc/image";
              var xhr = new XMLHttpRequest();
              xhr.open("POST", postUrl);
              xhr.setRequestHeader("Content-Type", "image/png");
              //xhr.onreadystatechange = function () {
              //   if (xhr.readyState === 4) {
              //      var res_display = document.getElementById("results");
              //      res_display.srcdoc = xhr.responseText;
              //   }
              //}
              xhr.send(imgData);
           };
           reader.readAsArrayBuffer(input.files[0]);
        }
     }
  }

以下是调用上述函数的HTML宣传语。

  <p>
     Upload the image here:
  </p>
  <input id="fid" name="fid" type="file" />
  <!--<button type="submit" onclick="javascript: getPixels()">Get Pixels</button>-->
  <p onclick="javascript: getPixels()">Get Pixels</p>
  <p />
  <hr />
  <p>
     <img id="img2check" src="" alt="" />
  </p>
  <p />
  <iframe id="results" style="width: 100%; border: 0; height: 400px;" src="javascript:;">
     Your browser does not support iframes.
  </iframe>

我可以选择响应并将其显示在 iframe 中，但无法让浏览器下载内容。

感谢您的帮助。我查看了 Whosebug 上的相关问题，但 none 到目前为止有所帮助。

提前致谢。

Answer 1

您不能强制客户端浏览器提示带有 XMLHttpRequest 的保存对话框。

您可以做的是：

1: 检查我对另一个类似问题的回答：How to get pdf file via javascript ajax

2: 在服务器上生成文件或创建一个 get 类型的请求处理程序，并为它提供 link 和 download 属性。 http://www.w3schools.com/TAgs/att_a_download.asp

3: 使用像 Downloadify 这样的第三方应用程序：https://github.com/dcneiner/Downloadify

4: 还有另一种方法使用 Blob，我还没有尝试过，在这里：Browser/HTML Force download of image from src="data:image/jpeg;base64..."。 post 是关于 base64 图像的，但我认为值得尝试使用 html 文件。

Answer 2

感谢er-han，下面的代码实现了目标。

  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="utf-8" />
     <title></title>
  </head>
  <body>
     <script type="text/javascript">
        function getPixels() {
           showImage();
           var input = document.getElementById("fid");
           if (input.files && input.files[0]) {
              if (typeof (FileReader) != "undefined") {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                    var imgData = e.target.result;
                    var postUrl = "./SimpleService.svc/image";
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", postUrl);
                    xhr.setRequestHeader("Content-Type", "image/png");
                    xhr.onreadystatechange = function () {
                       if (xhr.readyState === 4) {
                          var res_url = URL.createObjectURL(new Blob([xhr.responseText]));
                          var lnk = document.getElementById("dlink");
                          lnk.href = res_url;
                          lnk.style.display = "block";
                       }
                    }
                    xhr.send(imgData);
                 };
                 reader.readAsArrayBuffer(input.files[0]);
              }
           }
        }

        function showImage() {
           var input = document.getElementById("fid");
           if (input.files && input.files[0]) {
              if (typeof (FileReader) != "undefined") {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                    var img_display = document.getElementById("img2check");
                    img_display.src = e.target.result;
                 };
                 reader.readAsDataURL(input.files[0]);
              }
           }
        }
     </script>

     <p>
        Upload the image here:
     </p>
     <input id="fid" name="fid" type="file" />
     <p/>
     <button type="submit" onclick="javascript: getPixels()">Upload</button>
     <p />
     <hr />
     <p>
        <img id="img2check" src="" alt="" />
     </p>
     <p />
     <p>
        <a id="dlink" href="#" download="Data.html" style="display: none;">Download data</a>
     </p>
  </body>
  </html>

使用 JavaScript 的 HTTP POST 的可下载数据 link

Downloadable data link for HTTP POST using JavaScript

html

javascript

http-post

content-disposition