使用jquery ajax下载任何文件

时间:2017-02-22 11:14:37

标签: javascript php jquery html ajax

当我开发文件下载API时,我几乎没有任何东西可以在html页面中使用它。我搜索了很多。在某些页面中,我发现有些页面告诉我们无法使用ajax下载。 但我可以使用ajax。首先将文件转换为base64,然后使用这段代码作为中间件,这将创建锚标签,点击你的元素将wrok任何类型的文件,如doc,docx,xl​​s,xlsx,mp3,mp4 ....它可以下载任何类型的文件。

$(".filled-in").click(function(e) {
    var _this=$(this);
    $file = $(this).attr('id');
    $.ajax({
        type: "POST",
        url: {!! json_encode(url('/download')) !!}, data: {
            '_token' : $("input[name='_token']").val(),
            'file' : $file
        },
        dataType : "json",
        success : function(json) {
           var element = document.createElement('a');
           var fl='data:' + header_content +';charset=utf-8;base64,' +json.content;
            element.setAttribute('href', fl);
            element.setAttribute('download', $file_org_name);
            element.click();
        }
    });
});

1 个答案:

答案 0 :(得分:1)

的NodeJS

const express = require('express')
  ,app = express()
;
app.get('/download/:file*?', (req,res) => {

  // Magic
  ...
  // Redirect your user to the file path, and let them download the file
  res.download(`${__dirname}/${filePath}`);
});

的JavaScript

// Some kind of click event ¯\_(ツ)_/¯
buttonIGuess.addEventListener('click', e => {
  // Create a invisible iframe for the file downloading
  const iframeElement = document.createElement('iframe');
  // Set the source to your API and as well as the file path
  iframeElement.src = 'https://pony.com/download/rainbow_dash.png';
});
// It should work, if is work :P