【HTML】前台頁面調出文件另存為對話框幾種方法

大家都知道，網頁上傳本地文件可以用<input type="file" value=""/>來實現，在前台頁面調出另存為對話框、將服務器上存放的文件保存到本地那要怎么實現呢？以下便介紹幾種實現的思路和方法。

 

1.調用document.execCommand方法

調用JS方法document.execCommand即可在前台頁面調出另存為對話框，並將將服務器上存放的文件保存到本地。

 

這里有個很好的例子：

HTML頁面另存為對話框DEMO.rar

 

代碼： 

 
           
            
             
            
           <script language='javascript' type='text/javascript'> 
          
 
          function 
           getimg()  
            
          // 
          另存為存放在服務器上圖片到本地的方法 
          
{
    event.returnValue 
          = 
          false 
          ;
    show.window.location.href 
          = 
          imgSrc.src;
    timer 
          = 
          setInterval(checkload, 
          100 
          )
}

 
          function 
           checkload()
{
     
          if 
          (show.readyState 
          != 
          " 
          complete 
          " 
          )
    {
         
          // 
          調用document.execCommand方法，'Saveas'表示打開文件另存為對話框命令 
          
 
                  show.document.execCommand( 
          ' 
          SaveAs 
          ' 
          );
        clearInterval(timer)
    }
}  
 
          </ 
          script 
          > 
          
 
          < 
          img  
          id 
          ="imgSrc" 
           width 
          ="320px" 
           height 
          ="200px" 
           src 
          ="test.bmp" 
           alt 
          ="" 
          /></ 
          br 
          > 
          
 
          < 
          input  
          id 
          ="btnSaveAs" 
           type 
          ="button" 
           value 
          ="另存為上圖" 
           onclick 
          ="getimg()" 
          /> 
          
 
          < 
          iframe  
          src 
          ="" 
           name 
          ="show" 
            style 
          ="width:0;height:0" 
          ></ 
          iframe 
          > 
         

 

 實現效果：

 

 另外部分ie瀏覽器中，可能會阻止顯示內容，點擊上方"允許阻止的內容“即可正常運行

 

2. 調用ActiveX控件

實例化一個“MSComDlg.CommonDialog”對象，即可在前台頁面調出另存為對話框，與先前Js方法不同，該ActiveX控件還能獲取到你選擇的本地保存路徑。但缺點是客戶端需要已經注冊“COMDLG32.OCX”，且客戶端瀏覽器對ActiveX安全級別要求不是很高，否則就無法調出另存為對話框。

 

實例代碼：

 

try

        {
            OCXResult.Result.value = "";
            //實例化一個ActiveX對象
            var fd = new ActiveXObject("MSComDlg.CommonDialog"); 
            //設置保存文件類型選項
            fd.Filter = "BMP圖片|*.bmp";    
            fd.FilterIndex = 2;

            fd.fileName="你要保存的默認文件名";

 

            // must setting
            fd.MaxFileSize = 128;
            //打開另存為文件對話框

            fd.ShowSave();

        }
        catch(e)
        {

confirm("當前您的系統尚未注冊COMDLG32.OCX\n請先下載注冊此控件后);
        }

 附自動向客戶端本地系統注冊"COMDLG32.OCX"程序

 網頁文件另存為對話框控件.rar

 

 

 3.使用像第三方控件廠商提供的web控件（如碩正控件等）

 

 以上就是本人目前所知的前台頁面調出另存為對話框的三種方式，如有其它還望大家補充。。。