Jquery 从服务器下载csv文件_Jquery_Ajax_Rest

Jquery 从服务器下载csv文件

jquery ajax rest

Jquery 从服务器下载csv文件,jquery,ajax,rest,Jquery,Ajax,Rest,我有一个系统，其中前端使用javascript/ajax，后端使用REST（jersey）编写我想用我的系统下载一个文件。我搜索了各种论坛并实现了REST web方法，如下所示： @POST @Produces({"text/csv"}) @Consumes(MediaType.APPLICATION_FORM_URLENCODED) @Path("getcsv") public Response getcsv( @FormParam("usernamecsv") Strin

我有一个系统，其中前端使用javascript/ajax，后端使用REST（jersey）编写

我想用我的系统下载一个文件。我搜索了各种论坛并实现了REST web方法，如下所示：

@POST
@Produces({"text/csv"})
@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
@Path("getcsv")
public Response  getcsv(
        @FormParam("usernamecsv") String userid,
        @FormParam("filename") String filename
        )
{
    final File fobj = new File("c:/" +userid + "/output/" + filename);
    try
    {
        final FileInputStream f =  new FileInputStream(fobj);
ContentDisposition cd =  
        ContentDisposition.type("file").fileName(fobj.toString()).build(); 
Response response = Response
.ok()
.lastModified(new Date(fobj.lastModified()))
.type("application/octet-stream")
.header("Content-Disposition", cd)
.entity(f)
.build();
return response;
    }
    catch (FileNotFoundException e1)
    {
        // TODO Auto-generated catch block
        e1.printStackTrace();
    }
    return null;

}

最初我使用了StreamingOutput类并为其实现了write方法。在该方法中，我返回了从文件读取的字符串。但我发现这与上述实现没有区别。两者都返回文件中的字符串

在我的前端，这就是我所做的

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function fun1()
{
$.ajax({
    url: '/RestWSGS/jersey/UserAuthentication/getcsv',
    async: false,
    data: $('#form2').serialize(),
    type: 'POST',
    cache: false,
    contentType: "application/x-www-form-urlencoded",
    processData: false,
    dataType: "text",
    success: function(data)
     {
        var iframe;
        iframe = document.getElementById("hiddenDownloader");
        if (iframe === null)
        {
            var iframe;
            iframe = document.getElementById("hiddenDownloader");
            if (iframe === null)
            {
                iframe = document.createElement('iframe');  
                iframe.id = "hiddenDownloader";
                //iframe.style.visibility = 'hidden';
                $("#mydiv").append(iframe);
            }
            iframe.src = "http:\\localhost:8080\\c:\abc@abc.com#26 8 2012 13 5 49/gr1/output/test.csv";  
//iframe.src = data; 

        }

        alert('Hi');

     }
 });
}
$(function()
        {
            $(document).delegate("#mydiv","click",function(ev)
            {
            fun1();

            });
        });

</script>
</head>
<body>
<div id="mydiv" style='position:absolute;width:20px;height:20px;background:black'></div>
<form id="form2" enctype="multipart/form-data" method="post" >
 <input id ="usernamecsv" name="usernamecsv" type="hidden"  value="abc@abc.com#26 8 2012 13 5 49/gr1"/>
  <input id ="filename" name="filename" type="hidden"  value="test.csv" />
</form>

</body>
</html>


在此处插入标题
函数fun1（）
{
$.ajax({
url:“/RestWSGS/jersey/UserAuthentication/getcsv”，
async:false，
数据：$（'#form2'）。序列化（），
键入：“POST”，
cache:false，
contentType:“application/x-www-form-urlencoded”，
processData:false，
数据类型：“文本”，
成功：功能（数据）
{
var-iframe；
iframe=document.getElementById（“hiddenDownloader”）；
if（iframe==null）
{
var-iframe；
iframe=document.getElementById（“hiddenDownloader”）；
if（iframe==null）
{
iframe=document.createElement（'iframe'）；
iframe.id=“hiddenDownloader”；
//iframe.style.visibility='hidden'；
$（“#mydiv”）.append（iframe）；
}
iframe.src=“http:\\localhost:8080\\c:\abc@abc.com#26 8 2012 13 5 49/gr1/output/test.csv”；
//iframe.src=数据；
}
警报（“Hi”）；
}
});
}
$（函数（）
{
$（文档）。委托（“#mydiv”，“单击”，函数（ev）
{
fun1（）；
});
});

我的问题是，如果我用数据变量指定iframe.src，我将得到一个file not found响应（尽管数据变量包含文件的内容）

如果我将webservice的uri（我已经给了ajax调用）提供给iframe.src，我不知道如何发送参数

我确实需要向用户显示一个下载提示，并允许用户将文件保存到本地文件系统。我不认为我的休息是正确的，因为它应该显示一个文件对象在firebug在张贴期间，而不是文件的内容

我可以返回字符串并用它填充任何textarea/div，然后让用户复制粘贴到他的文件中！但这看起来并不顺利或优雅

请帮忙，卡维塔

编辑：尝试将@products and type in Response.type（）更改为“application/csv”和“application/something”，但它总是尝试将服务器返回的文件内容附加到当前url，并打开搜索，因为显然找不到文件

编辑：

我尝试转换POST以进入其余部分，并使用返回的数据。然后它返回一个文档，但仍然无法打开该文件。

您的@products标记与您内联设置的类型冲突。如果你们两个都做了

application/octet-stream

，我会期待更好的结果。

经过大量的研究，我想我已经找到了解决问题的方法。这可能不是理想的解决方案，如果有任何重大问题，请告诉我

基本上，我尝试在服务器上访问我的文件，并且只能从docroot文件夹（路径=C:\glassfish3\glassfish\domains\domain1\docroot）访问它。所以我意识到我必须将文件从服务器上的任何位置复制到这个位置。我在Web服务中做到了这一点。我在某个地方读到，当时正试图从web服务发送文件本身。这是错误的，在这次更改之后，我只返回了一个纯文本，其中包含相对于docroot的路径

然后又出现了另一个挫折，因为我的文件必须在一个文件夹中，而文件夹名包含一个#字符。这似乎是不允许的，iframe不会要求我下载

现在我修改了我的代码如下：其余：

我的客户端代码：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function fun1()
{
$.ajax({
    url: '/RestWSGS/jersey/UserAuthentication/getcsv',
    async: false,
    data: $('#form2').serialize(),
    type: 'POST',
    cache: false,
    contentType: "application/x-www-form-urlencoded",
    processData: false,
    dataType: "text",
    success: function(data)
     {
        var iframe;
        iframe = document.getElementById("hiddenDownloader");
        if (iframe === null)
        {
            var iframe;
            iframe = document.getElementById("hiddenDownloader");
            if (iframe === null)
            {
                iframe = document.createElement('iframe');  
                iframe.id = "hiddenDownloader";
                //iframe.style.visibility = 'hidden';
                $("#mydiv").append(iframe);
            }


        }
        iframe.src = data;  
        alert('Hi');

     }
 });
}
$(function()
        {
    $(document).delegate("#hiddenDownloader","onload",function(ev)
            {
        alert('in onload');
            });

            $(document).delegate("#mydiv","click",function(ev)
            {
            fun1();

    });
        });
    </script>
</head>
<body>
<a id ='myhref'  href=""></a>
<div id="mydiv" style='position:absolute;width:20px;height:20px;background:black'></div>
<form id="form2" enctype="multipart/form-data" method="post" >
 <input id ="usernamecsv" name="usernamecsv" type="hidden"  value="abc@abc.com#26 8 2012 13 5 49/gr1"/>
  <input id ="filename" name="filename" type="hidden"  value="test.csv" />
</form>

    </body>
</html>


在此处插入标题
函数fun1（）
{
$.ajax({
url:“/RestWSGS/jersey/UserAuthentication/getcsv”，
async:false，
数据：$（'#form2'）。序列化（），
键入：“POST”，
cache:false，
contentType:“application/x-www-form-urlencoded”，
processData:false，
数据类型：“文本”，
成功：功能（数据）
{
var-iframe；
iframe=document.getElementById（“hiddenDownloader”）；
if（iframe==null）
{
var-iframe；
iframe=document.getElementById（“hiddenDownloader”）；
if（iframe==null）
{
iframe=document.createElement（'iframe'）；
iframe.id=“hiddenDownloader”；
//iframe.style.visibility='hidden'；
$（“#mydiv”）.append（iframe）；
}
}
iframe.src=数据；
警报（“Hi”）；
}
});
}
$（函数（）
{
$（文档）.delegate（“#hiddenDownloader”，“onload”，函数（ev）
{
警报（“在加载中”）；
});
$（文档）。委托（“#mydiv”，“单击”，函数（ev）
{
fun1（）；
});
});

希望有人觉得它有用！！谢谢你的投入

Kavita

如果你通过浏览器点击资源，你会得到文件吗？contentType：“text/csv”是什么赋予的？

@产生（{“text/csv”}）

注释就可以了。如果通过firebug查看帖子，就会显示返回的csv的内容。@BanksySan意味着调用Web服务？？这是在我使用iframe.src=data并将@products更改为app/oct之后它给我的。。但它仍然没有要求我保存下载。我还更改了数据类型：“application/octetstream”，在ajax调用中，Accepts头只是谜题的一部分。浏览器也会对响应的内容类型作出反应。下载的文件有问题。在我的解决方案中，该文件实际上没有返回，只有从docroot开始的路径是。有时它会给一个角色加一个字母

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function fun1()
{
$.ajax({
    url: '/RestWSGS/jersey/UserAuthentication/getcsv',
    async: false,
    data: $('#form2').serialize(),
    type: 'POST',
    cache: false,
    contentType: "application/x-www-form-urlencoded",
    processData: false,
    dataType: "text",
    success: function(data)
     {
        var iframe;
        iframe = document.getElementById("hiddenDownloader");
        if (iframe === null)
        {
            var iframe;
            iframe = document.getElementById("hiddenDownloader");
            if (iframe === null)
            {
                iframe = document.createElement('iframe');  
                iframe.id = "hiddenDownloader";
                //iframe.style.visibility = 'hidden';
                $("#mydiv").append(iframe);
            }


        }
        iframe.src = data;  
        alert('Hi');

     }
 });
}
$(function()
        {
    $(document).delegate("#hiddenDownloader","onload",function(ev)
            {
        alert('in onload');
            });

            $(document).delegate("#mydiv","click",function(ev)
            {
            fun1();

    });
        });
    </script>
</head>
<body>
<a id ='myhref'  href=""></a>
<div id="mydiv" style='position:absolute;width:20px;height:20px;background:black'></div>
<form id="form2" enctype="multipart/form-data" method="post" >
 <input id ="usernamecsv" name="usernamecsv" type="hidden"  value="abc@abc.com#26 8 2012 13 5 49/gr1"/>
  <input id ="filename" name="filename" type="hidden"  value="test.csv" />
</form>

    </body>
</html>