javascript以post方式实现文件的导出或下载

最新推荐文章于 2025-06-20 15:05:16 发布

qq_34186109

最新推荐文章于 2025-06-20 15:05:16 发布

阅读量8.4k

点赞数

CC 4.0 BY-SA版权

文章标签： post导出导出文件很好的办法 javascript实现文件导出下载文件 post实现文件导出

本文链接：https://blog.youkuaiyun.com/qq_34186109/article/details/80736455

本文介绍了一种使用XMLHttpRequest对象通过POST方式实现文件导出的方法，解决了GET方式导出文件时参数传递的问题。通过创建XMLHttpRequest对象发送POST请求，结合FileSaver.js库的saveAs()方法，可以实现不同浏览器环境下文件的下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当用GET方式来实现文件（excel、pdf、doc）导出或下载的时候，传参比较简单直接放到url里面，常用的导出方法有：

1>window.open(url参数)，来实现文件的导出。

2>动态添加a标签,<a target="_blank" href="url参数"></a>来实现文件的导出。

当使用post来实现文件导出或下载的时候传参是一个问题，要知道不管是window.open还是a标签只能get方式请求，在网上查找了关于用post实现传参来导出文件或下载，然而并没有合适的解决办法。查了javascript权威指南结合自己的项目，找到了一种非常非常非常好的方法来实现文件以GET方式导出。长话短说，下面是解决方案：

所有浏览器都支持XMLHttpRequest对象（不了解的童鞋查看javascript权威指南），它定义了用脚本操作HTTP的API。这个API包含实现POST请求的能力。XHR2还定义了一种将URL指定的内容以Blob（二进制）的形式下载下来。

例子：使用XMLHttpRequest下载Blob

function(){

 
   var 
  xhr = 
  new 
  XMLHttpRequest();//创建新的XHR对象 
 
 
    
  xhr 
  . 
  open 
  ( 
  'post' 
  ,  
  url 
  );//指定获取数据的方式和url地址 
 
 
  xhr. 
  setRequestHeader( 
  'Content-Type', 
  'application/json; charset=UTF-8') 
 
 
  xhr. 
  responseType = 
  'blob';//以blob的形式接收数据，一般文件内容比较大 
 
 
     xhr. 
    onload = 
    function( 
    e) { 
   
 
    var 
    blob = 
    this. 
    response;//Blob数据 
   
 
    if ( 
    this. 
    status == 
    200) { 
   
 
    if ( 
    blob && 
    blob. 
    size > 
    0) { 
   
 
    saveAs( 
    blob, 
    fileName);//处理二进制数据，让浏览器认识它 
   

     } 
   

     } 
   