碼上歡樂
相關內容    簡體    繁體

瀏覽器下載/導出文件 及jQuery表單提交

本文轉載自   查看原文   2016-10-14 16:18   3285    總結/ Jsp/ js
1 比如以下按鈕, 用於導出文件，如EXCEL文件。 
   
   
   
           
    
    
    
    
            
  1.  <li>
    2. 
    
    
    
            
  2.  <button class="whiteBg btn2" onclick="doExp(1);return false; ">
    3. 
    
    
    
            
  3.     <i class="fa fa-save (alias) m-r-xs" ></i>導出所有工單
    4. 
    
    
    
            
  4.  </button>
    5. 
    
    
    
            
  5. </li>
    6. 
    
    
    
            
  6. <li>
    7. 
    
    
    
            
  7.  <button class="whiteBg btn2" onclick="doExp(2);return false; "> 
    8. 
    
    
    
            
  8.  <i class="fa fa-file-text-o m-r-xs"></i>導出所選工單
    9. 
    
    
    
            
  9.  </button>
    10. 
    
    
    
            
  10. </li>
    11.

2.1 調用的js方法如下 , 通過 url傳值的方式get請求到SpringMVC的控制器. 
    
    
    
            
    
     
     
     
             
  1. function expExcel(){
    2. 
     
     
     
             
  2.  //alert("expExcel");
    3. 
     
     
     
             
  3.  var url="../user/expExcel?loginName=${user.loginName}&userName=${user.userName}&moblie=${user.mobile}";
    4. 
     
     
     
             
  4.  //alert(url);
    5. 
     
     
     
             
  5.  window.location.href=url;
    6. 
     
     
     
             
  6.  }
    7. 
     
     
     
             
  7. 或者用
    8. 
     
     
     
             
  8. function exportExcel(){ if(flag){ flag = false; window.location.href = "${ctx}/rpt/4gSite/empToExcel";setTimeout(function(){flag = true;},2000);  } }
    9. 
     
     
     
             
  9. 或者, 都是一樣的用法.
    10. 
     
     
     
             
  10. $(function(){ exp=function(){ var query_time=$('#query_time').val(); window.location.href="../../doExp?query_time="+query_time; } });
    11.
window.location.href  為本頁面跳轉請求 (js中在本頁面調整,上頁面調整之類的用法可以延伸閱讀), 對應的控制器代碼如下, 從DB獲取數據后生成對應的文件,然后通過 ServletUtils . flushExcelOutputStream
輸出流寫給瀏覽器. 
    
    
    
            
    
     
     
     
             
  1.  @RequestMapping("/expToExcel")
    2. 
     
     
     
             
  2.  public void expToExcel(HttpServletRequest request, HttpServletResponse response) {
    3. 
     
     
     
             
  3.  UserContext uc = this.getUserContext(request);
    4. 
     
     
     
             
  4.  String loginName = request.getParameter("loginName");
    5. 
     
     
     
             
  5.  String userName= request.getParameter("userName");
    6. 
     
     
     
             
  6.  String moblie= request.getParameter("moblie");
    7. 
     
     
     
             
  7.  User user=new User();
    8. 
     
     
     
             
  8.  user.setLoginName(loginName);
    9. 
     
     
     
             
  9.  user.setUserName(userName);
    10. 
     
     
     
             
  10.  user.setMobile(moblie);
    11. 
     
     
     
             
  11.  List<User> users=this.userService.getListBy(user,uc);
    12. 
     
     
     
             
  12.  ExcelExportUtils2<User> exUser = new ExcelExportUtils2<User>();
    13. 
     
     
     
             
  13.  HSSFWorkbook workbook = exUser.exportExcel(new HSSFWorkbook(),"用戶列表清單", users);
    14. 
     
     
     
             
  14.  ServletUtils.flushExcelOutputStream(request, response, workbook,
    15. 
     
     
     
             
  15.  "用戶列表清單_"+DateUtil.formatDateToString("yyyyMMdd", new Date()));
    16. 
     
     
     
             
  16.  }
    17.
對應 S ervletUtils. flushExcelOutputStream 的代碼  【 ServletUtils的代碼可以參考springside或者jeesite】 】
分兩個步驟， 
1判斷不同的瀏覽器，對文件名的中文字符進行編碼。
2然后利用輸出流將文件寫出給瀏覽器。 
     
     
     
             
    
      
      
      
              
  1.  /**
    2. 
      
      
      
              
  2.  * 導出Excel，使用自定義的名字作為文件名
    3. 
      
      
      
              
  3.  * @param request
    4. 
      
      
      
              
  4.  * @param response
    5. 
      
      
      
              
  5.  * @param dataList
    6. 
      
      
      
              
  6.  * @throws UnsupportedEncodingException 
    7. 
      
      
      
              
  7.  * @throws IOException
    8. 
      
      
      
              
  8.  */
    9. 
      
      
      
              
  9.  public static void flushExcelOutputStream(HttpServletRequest request, HttpServletResponse response,
    10. 
      
      
      
              
  10.  HSSFWorkbook workbook,String fileName) {
    11. 
      
      
      
              
  11.  String userAgent = request.getHeader("User-Agent");
    12. 
      
      
      
              
  12.  String newFileName = null;
    13. 
      
      
      
              
  13.  try {
    14. 
      
      
      
              
  14.  fileName = URLEncoder.encode(fileName, "UTF8");
    15. 
      
      
      
              
  15.  } catch (UnsupportedEncodingException e1) {
    16. 
      
      
      
              
  16.  e1.printStackTrace();
    17. 
      
      
      
              
  17.  }
    18. 
      
      
      
              
  18.  if (userAgent != null) {
    19. 
      
      
      
              
  19.  userAgent = userAgent.toLowerCase();
    20. 
      
      
      
              
  20.  // IE瀏覽器，只能采用URLEncoder編碼
    21. 
      
      
      
              
  21.  if (userAgent.indexOf("msie") != -1) {
    22. 
      
      
      
              
  22.  newFileName = "filename=\"" + fileName + ".xls\"";
    23. 
      
      
      
              
  23.  }
    24. 
      
      
      
              
  24.  // Opera瀏覽器只能采用filename*
    25. 
      
      
      
              
  25.  else if (userAgent.indexOf("opera") != -1) {
    26. 
      
      
      
              
  26.  newFileName = "filename*=UTF-8''" + fileName +".xls";
    27. 
      
      
      
              
  27.  }
    28. 
      
      
      
              
  28.  // Safari瀏覽器，只能采用ISO編碼的中文輸出
    29. 
      
      
      
              
  29.  else if (userAgent.indexOf("safari") != -1) {
    30. 
      
      
      
              
  30.  try {
    31. 
      
      
      
              
  31.  newFileName = "filename=\""
    32. 
      
      
      
              
  32.  + new String(fileName.getBytes("UTF-8"), "ISO8859-1")
    33. 
      
      
      
              
  33.  + ".xls\"";
    34. 
      
      
      
              
  34.  } catch (UnsupportedEncodingException e) {
    35. 
      
      
      
              
  35.  e.printStackTrace();
    36. 
      
      
      
              
  36.  }
    37. 
      
      
      
              
  37.  }
    38. 
      
      
      
              
  38.  // Chrome瀏覽器，只能采用MimeUtility編碼或ISO編碼的中文輸出
    39. 
      
      
      
              
  39.  else if (userAgent.indexOf("applewebkit") != -1) {
    40. 
      
      
      
              
  40.  try {
    41. 
      
      
      
              
  41.  fileName = MimeUtility.encodeText(fileName, "UTF8", "B");
    42. 
      
      
      
              
  42.  } catch (UnsupportedEncodingException e) {
    43. 
      
      
      
              
  43.  e.printStackTrace();
    44. 
      
      
      
              
  44.  }
    45. 
      
      
      
              
  45.  newFileName = "filename=\"" + fileName + ".xls\"";
    46. 
      
      
      
              
  46.  }
    47. 
      
      
      
              
  47.  // FireFox瀏覽器，可以使用MimeUtility或filename*或ISO編碼的中文輸出
    48. 
      
      
      
              
  48.  else if (userAgent.indexOf("mozilla") != -1) {
    49. 
      
      
      
              
  49.  newFileName = "filename*=UTF-8''" + fileName +".xls";
    50. 
      
      
      
              
  50.  }
    51. 
      
      
      
              
  51.  }
    52. 
      
      
      
              
  52.  //文件名編碼結束。
    53. 
      
      
      
              

    54. 
      
      
      
              
  54.   response.setHeader("Content-Disposition", "attachment;" + newFileName); // 這個很重要
    55. 
      
      
      
              
  55.  ServletUtils.setDisableCacheHeader(response);
    56. 
      
      
      
              
  56.  ServletOutputStream out = null;
    57. 
      
      
      
              
  57.  try {
    58. 
      
      
      
              
  58.   out = response.getOutputStream();
    59. 
      
      
      
              
  59.  workbook.write(out);
    60. 
      
      
      
              
  60.  out.flush();
    61. 
      
      
      
              
  61.  
    62. 
      
      
      
              
  62.  } catch (IOException e) {
    63. 
      
      
      
              
  63.  e.printStackTrace();
    64. 
      
      
      
              
  64.  }finally{
    65. 
      
      
      
              
  65.  if(out != null){
    66. 
      
      
      
              
  66.  try {
    67. 
      
      
      
              
  67.  out.close();
    68. 
      
      
      
              
  68.  } catch (IOException e) {
    69. 
      
      
      
              
  69.  logger.error(e.getMessage(), e);
    70. 
      
      
      
              
  70.  e.printStackTrace();
    71. 
      
      
      
              
  71.  }
    72. 
      
      
      
              
  72.  }
    73. 
      
      
      
              
  73.  }
    74. 
      
      
      
              
  74.  }
    75.

  2.2 以上都是基於url傳值的方式(GET方式)就參數傳給后台處理.
這是比較常用的方式.
問題有2個
1 參數過多的話傳遞麻煩.
2 get方式傳遞的長度有限制
針對 傳參麻煩可以通過以下方式改進, 將表單序列化 
    
    
    
            
    
     
     
     
             
  1. window.location.href = "../../../../download?"+$('#form_Report').serialize();
    2. 
     
     
     
             
  2. window.location.href = "../../../../download?userName=${user.userName}"+"&"+$('#form_Report').serialize();
    3.
注意序列化中用到的是serialize().
注意serialize() 和serializearray()的不同

 
針對2的問題,只能通過post方式提交來規避.
3.1 實現方式1
js可以直接將表單table直接提交的方式來傳遞參數給SpringMVC的控制器: 效果也一樣的. 這里要注意table的action被修改了. 表單查詢調用時需注意.
//這里jeesite使用jbox插件.調用 top .$.jBox.confirm 在父頁面上彈出確認框,然后還是使用js
更改form的action並提交$("#submitForm").attr("action", url); 
觸發submit事件，再提交表單$("#submitForm").submit(); 
     
     
     
             
    
      
      
      
              
  1. <input id="btnExport" class="btn btn-primary" type="button" value="導出"/>
    2. 
     
     
     
             
     
     
     
             
    
      
      
      
              
  1.  $(document).ready(function() {
    2. 
      
      
      
              
  2.  // 表格排序
    3. 
      
      
      
              
  3.  tableSort({callBack : page});
    4. 
      
      
      
              
  4.  
    5. 
      
      
      
              
  5.  $("#btnExport").click(function(){
    6. 
      
      
      
              
  6.  top.$.jBox.confirm("確認要導出用戶數據嗎？","系統提示",function(v,h,f){
    7. 
      
      
      
              
  7.  if(v == "ok"){
    8. 
      
      
      
              
  8.  $("#searchForm").attr("action","${ctx}/sys/user/export").submit();
    9. 
      
      
      
              
  9.  }
    10. 
      
      
      
              
  10.  },{buttonsFocus:1});
    11. 
      
      
      
              
  11.  top.$('.jbox-body .jbox-icon').css('top','55px');
    12. 
      
      
      
              
  12.  });
    13. 
      
      
      
              
  13.  
    14. 
      
      
      
              
  14.  $("#btnImport").click(function(){
    15. 
      
      
      
              
  15.  $.jBox($("#importBox").html(), {title:"導入數據", buttons:{"關閉":true}, 
    16. 
      
      
      
              
  16.  bottomText:"導入文件不能超過5M，僅允許導入“xls”或“xlsx”格式文件！"});
    17. 
      
      
      
              
  17.  });
    18. 
      
      
      
              
  18.  });
    19.
3.2  本方法和3.1大同小異, 都是通過表單的方式來提交.3.2模擬一個表單將參數填入創建input
通過js模擬表單提交
調用如下 
   
   
   
           
    
    
    
    
            
  1. DownLoadFile2({url:'../../../alarm/doExp',data:ids}); //ids為選中的數據的id如拼接字符串,如: 1,2,3,55,333,123,
    2.
所調用方法如下 
    
    
    
            
    
     
     
     
             
  1. //提交表單
    2. 
     
     
     
             
  2. var DownLoadFile = function (options) {
    3. 
     
     
     
             
  3.  var config = $.extend(true, { method: 'post' }, options);
    4. 
     
     
     
             
  4.  var $iframe = $('<iframe id="down-file-iframe" />');
    5. 
     
     
     
             
  5.  var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
    6. 
     
     
     
             
  6.  $form.attr('action', config.url);
    7. 
     
     
     
             
  7.  for (var key in config.data) {
    8. 
     
     
     
             
  8.  $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
    9. 
     
     
     
             
  9.  }
    10. 
     
     
     
             
  10.  $iframe.append($form);
    11. 
     
     
     
             
  11.  $(document.body).append($iframe);
    12. 
     
     
     
             
  12.  $form[0].submit();
    13. 
     
     
     
             
  13.  $iframe.remove();
    14. 
     
     
     
             
  14. };
    15. 
     
     
     
             
  15. //提交參數
    16. 
     
     
     
             
  16. var DownLoadFile2 = function (options) {
    17. 
     
     
     
             
  17.  var config = $.extend(true, { method: 'post' }, options);
    18. 
     
     
     
             
  18.  var $iframe = $('<iframe id="down-file-iframe" />');
    19. 
     
     
     
             
  19.  var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
    20. 
     
     
     
             
  20.  $form.attr('action', config.url);
    21. 
     
     
     
             
  21.  $form.append('<input type="hidden" name="ids" value="' + options.data + '" />');
    22. 
     
     
     
             
  22.  $iframe.append($form);
    23. 
     
     
     
             
  23.  $(document.body).append($iframe);
    24. 
     
     
     
             
  24.  $form[0].submit();
    25. 
     
     
     
             
  25.  $iframe.remove();
    26. 
     
     
     
             
  26. };
    27.
如IE8下中文存在問題可以優化為 
    
    
    
            
    
     
     
     
             
  1. var DownLoadFile = function (options) { 
    2. 
     
     
     
             
  2.  var config ={ method: 'post' }; 
    3. 
     
     
     
             
  3.  var $form = $('<form method="' + config.method + '" />'); 
    4. 
     
     
     
             
  4.  $(document.body).append($form); 
    5. 
     
     
     
             
  5.  $form.attr('action', options.url); 
    6. 
     
     
     
             
  6.  for (var key in options.data) { 
    7. 
     
     
     
             
  7.  $form.append('<input type="hidden" name="' + key + '" value="' + options.data[key] + '" />'); 
    8. 
     
     
     
             
  8.  } 
    9. 
     
     
     
             
  9.  $form[0].submit(); 
    10. 
     
     
     
             
  10.  $form.remove(); 
    11. 
     
     
     
             
  11. }; 
    12.
調用方法舉例 
    
    
    
            
    
     
     
     
             
  1. var DownLoadFile = function (options) { 
    2. 
     
     
     
             
  2.  var config ={ method: 'post' }; 
    3. 
     
     
     
             
  3.  var $form = $('<form method="' + config.method + '" />'); 
    4. 
     
     
     
             
  4.  $(document.body).append($form); 
    5. 
     
     
     
             
  5.  $form.attr('action', options.url); 
    6. 
     
     
     
             
  6.  for (var key in options.data) { 
    7. 
     
     
     
             
  7.  $form.append('<input type="hidden" name="' + key + '" value="' + options.data[key] + '" />'); 
    8. 
     
     
     
             
  8.  } 
    9. 
     
     
     
             
  9.  $form[0].submit(); 
    10. 
     
     
     
             
  10.  $form.remove(); 
    11. 
     
     
     
             
  11. }; 
    12.
后台方法一樣, 控制器輸出流寫文件即可.


備注:

  • $(selector).serialize() 序列表表格內容為字符串，用於 Ajax 請求。可以對整個form，也可以只針對某部分。

   
   
   
           
    
    
    
    
            
  1. $('#form').submit(function(event){
    2. 
    
    
    
            
  2.  event.preventDefault();
    3. 
    
    
    
            
  3.  
    4. 
    
    
    
            
  4. $.ajax({
    5. 
    
    
    
            
  5.  url:' ',
    6. 
    
    
    
            
  6.  type:'post',
    7. 
    
    
    
            
  7.  data:$("form").serialize(),
    8. 
    
    
    
            
  8.  
    9. 
    
    
    
            
  9.  
    10. 
    
    
    
            
  10. }
    11. 
   
   
   
           

  
  
  
          
    
   
   
   
           
  • $(selector).serializeArray()
    •

serializeArray() 方法序列化表單元素（類似 .serialize() 方法），返回 JSON 數據結構數據。

注意：此方法返回的是 JSON 對象而非 JSON 字符串。需要使用插件或者第三方庫進行字符串化操作。

返回的 JSON 對象是由一個對象數組組成的，其中每個對象包含一個或兩個名值對 —— name 參數和 value 參數（如果 value 不為空的話）。舉例來說：

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值為空
]

.serializeArray() 方法使用了 W3C 關於 successful controls（有效控件） 的標准來檢測哪些元素應當包括在內。特別說明，元素不能被禁用（禁用的元素不會被包括在內），並且元素應當有含有 name 屬性。提交按鈕的值也不會被序列化。文件選擇元素的數據也不會被序列化。

該方法可以對已選擇單獨表單元素的對象進行操作，比如 <input>, <textarea>, 和 <select>。不過，更方便的方法是，直接選擇 <form> 標簽自身來進行序列化操作。

  
  
  
          

   
   
   
           
    
    
    
            
    
     
     
     
             
  1. $("form").submit(function() {
    2. 
     
     
     
             
  2.  console.log($(this).serializeArray());
    3. 
     
     
     
             
  3.  return false;
    4. 
     
     
     
             
  4. });
    5. 
     
     
     
             
  5.  
    6. 
     
     
     
             
  6. 上面的代碼產生下面的數據結構（假設瀏覽器支持 console.log）：
    7. 
     
     
     
             
  7.  [
    8. 
     
     
     
             
  8.  {
    9. 
     
     
     
             
  9.  name: a
    10. 
     
     
     
             
  10.  value: 1
    11. 
     
     
     
             
  11.  },
    12. 
     
     
     
             
  12.  {
    13. 
     
     
     
             
  13.  name: b
    14. 
     
     
     
             
  14.  value: 2
    15. 
     
     
     
             
  15.  },
    16. 
     
     
     
             
  16.  {
    17. 
     
     
     
             
  17.  name: c
    18. 
     
     
     
             
  18.  value: 3
    19. 
     
     
     
             
  19.  },
    20. 
     
     
     
             
  20.  {
    21. 
     
     
     
             
  21.  name: d
    22. 
     
     
     
             
  22.  value: 4
    23. 
     
     
     
             
  23.  },
    24. 
     
     
     
             
  24.  {
    25. 
     
     
     
             
  25.  name: e
    26. 
     
     
     
             
  26.  value: 5
    27. 
     
     
     
             
  27.  }
    28. 
     
     
     
             
  28. ]
    29. 
    
    
    
            

  
  
  
          

  
  
  
          

   
   
   
           
    
    
    
            
    
     
     
     
             
  • $.params() $.param()方法是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。
    • 
    
    
    
            

   
   
   
           
序列化一個 key/value 對象：

   
   
   
           
var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);


   
   
   
           
結果:

   
   
   
           
width=1680&height=1050





免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 利用form.submit提交表單導出文件到客戶端瀏覽器, 提示下載! Axure導出文件無法在瀏覽器打開 java文件下載和導出文件名亂碼瀏覽器兼容性問題 chrome瀏覽器導出文件提示病毒掃描失敗 web項目中使用火狐瀏覽器導出文件時文件名亂碼 FileStreamResult 下載或導出文件 django下載或者導出文件 vue導出文件下載 jsp,jquery,spring mvc 實現導出文件 js通過動態創建a標簽用於下載或者導出文件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM