js实现ajax获取的文件base64字符串处理.md

    <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); 
        }; 

结果展示