js實現ajax獲取的文件base64字符串處理.md

需求介紹

前端通過ajax調用java的接口獲取到json字符串，在通過js處理獲取到的json字符串將文件內容展示在頁面上，同時可以對文件下載。

Java后端代碼

    /** * 獲取文件內容 * @return */
    public String getFileContent() {
        Map<String, Object> fileMap = new HashMap<>();
        fileMap.put("fileName", zsFiles.get(0).getAttachFileName());
        
        //獲取文件流
        InputStream is = fileAttachService.getAttachStorageDetail(zsFiles.get(0).getAttachGuid()).getContent();
        if (is == null) {
            fileMap.put("fileContent", "");
            return JsonUtil.controlsToJson(fileMap);
        }
        //獲取文件流
        byte[] fileBuff = null;
        
        try {
        	fileBuff = this.inputStreamToByteArray(is);
        	if (is != null) {
        		is.close();
        	}
        } catch (IOException e) {
            e.printStackTrace();
        }
        fileMap.put("fileContent", Base64.encodeBase64String(fileBuff));
        return JsonUtil.controlsToJson(fileMap);
    }
    
    /** * 輸入流轉字節數組 * @param input * @return * @throws IOException */
    private byte[] inputStreamToByteArray(InputStream input) throws IOException {
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        byte[] buffer = new byte[1024];
        int n = 0;
        while (-1 != (n = input.read(buffer))) {
            output.write(buffer, 0, n);
        }
        return output.toByteArray();
    }

前端html代碼

    <div>
        <input id="tmpData" type="hidden"/>
        <a id="downloadLink" href="javascript:downloadDoc()">文件下載</a>
    </div>
    <div id="canvas_list"></div>

前端js代碼

pdf預覽使用pdf.js插件，前端需要引入pdf.js文件

    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

    var testFile = function() {
            $.ajax({
                url: "getFileContent",
                type: "post",
                data: '',
                dataType: "json",
                cache: false
            })
            .success(function(msg) {
                var jsonArray = $.parseJSON(msg.custom);
                var fileName = jsonArray.fileName;
                var fileData = jsonArray.fileContent; 
                // 隱藏域，附件信息
                $("#downloadLink").html(fileName);
                $("#tmpData").val(fileData);
                console.log(jsonArray);
                console.log("---------------------");
                
                //調用
                showPdf1(fileData);
            });
        };
        
        //base64字符串轉array
        var base64ToUint8Array = function(base64String) {
             const padding = '='.repeat((4 - base64String.length % 4) % 4);
               const base64 = (base64String + padding)
                            .replace(/\-/g, '+')
                            .replace(/_/g, '/');
    
               const rawData = window.atob(base64);
               const outputArray = new Uint8Array(rawData.length);
    
               for (let i = 0; i < rawData.length; ++i) {
                    outputArray[i] = rawData.charCodeAt(i);
               }
               return outputArray;
        }
        
        // pdf的base64數據解碼預覽
        var showPdf1 = function(pdfData) {
            
             //base64字符串解碼
             pdfData = atob(pdfData);
             //通過腳本標簽加載，創建pdf導出方式
             var pdfjsLib = window['pdfjs-dist/build/pdf'];
             //配置 workerSrc
             pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
             var loadingTask = pdfjsLib.getDocument({data: pdfData});
             loadingTask.promise.then(function(pdf) {
                  console.log('PDF loaded');
                  //總頁數
                  var pageNums = pdf.numPages;
                  console.log(pageNums);
                  
                  // 加載pdf頁面數據
                  for (var pageNum = 1; pageNum <= pageNums; pageNum ++) {
                      renderPage(pdf, pageNum);
                  }
                }, function (reason) {
                  // PDF loading error
                  console.error(reason);
                });
         };
         
         //渲染pdf頁面數據
         var renderPage = function(pdfDoc, num) {
             // Using promise to fetch the page
             pdfDoc.getPage(num).then(function(page) {
            	 var canvasList = document.getElementById('canvas_list');
                 var canvas = document.createElement('canvas');
                 canvasList.appendChild(canvas);
                 
                 var scale = 1.5;
                 var viewport = page.getViewport({scale: scale});

                 // Prepare canvas using PDF page dimensions
                 //var canvas = document.getElementById('the-canvas');
                 var context = canvas.getContext('2d');
                 canvas.height = viewport.height;
                 canvas.width = viewport.width;

                 // Render PDF page into canvas context
                 var renderContext = {
                   canvasContext: context,
                   viewport: viewport
                 };
                 var renderTask = page.render(renderContext);
                 renderTask.promise.then(function () {
                   console.log('Page rendered');
                 });
             });
        }
        
        // 下載文件方法 
        var downloadDoc = function() { 
             var fileName = $("#downloadLink").html();
             var fileData = $("#tmpData").val();
             var content = base64ToUint8Array(fileData);
             var eleLink = document.createElement('a'); 
             eleLink.download = fileName; 
             eleLink.style.display = 'none'; 
             // 字符內容轉變成blob地址 
             var blob = new Blob([content]);
             eleLink.href = URL.createObjectURL(blob); 
            
             // 自動觸發點擊 
             document.body.appendChild(eleLink); 
             eleLink.click(); 
             
             // 然后移除 
             document.body.removeChild(eleLink); 
        }; 

結果展示

 

頁面預覽結果