最近在整理项目中用到的插件或者使用心得，感觉还是写成博客，能加深新一层的理解。

我先说一下我的需求：由于java后台编译的文件流在手机端加载速度太慢，所以想着可以在前端解析，放在页面展示给用户。

所以，我需要后台传给我的是base64编码的pdf文件。我们知道，单纯靠base64解析pdf文件是解析不了的。所以需要引入另一个pdf解析文件--pdf.js

具体的使用方法大家可以看源码：https://mozilla.github.io/pdf.js/

我试着按源码一步一步的操作的，但发现将build文件夹整体引入，也没有方法解决我的需求。最后，在项目中只引用了pdf.js和pdf.worker.js。引入方式和其他引入js文件一样。

我将我自己的demo放在gitHub上了，有兴趣的可以看一下。这里，我先说一下我的理解。

看了很多关于pdf.js的博客，大部分都是关于引入pdf的路径，然后在前端页面展示出来的。关于base64编码后的pdf文件很少。直接引入pdf文件路径的方法，我就不介绍了，大家可以参考其他博客。我现在介绍一下，经过base64编码后的pdf文件如何在前端页面显示出来。

需要的知识点：大家需要知道 Unit8Array和arrayBuffer

首先说一下Unit8Array：（具体可自己查一下MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array）

Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

语法结构：Uint8Array(length);//创建初始化为0的，包含length个元素的无符号整型数组

Uint8Array(typedArray);

Uint8Array(object);

　　　　　　　　　　Uint8Array(buffer [, byteOffset [, length]]);

ArrayBuffer:又称类型化数组。
  1. 数组里面可以放数字、字符串、布尔值以及对象和数组等，ArrayBuffer放0和1组成的二进制数据
  2. 数组放在堆中，ArrayBuffer则把数据放在栈中（所以取数据时后者快）
  3. ArrayBuffer初始化后固定大小，数组则可以自由增减。(准确的说，视图才应该跟数组来比较这个特点)
接下来，我贴一下代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>pdf的使用</title>

</head>

<body>

<div id="container">

    <div id="pop"></div>

</div>

<script src="../js/pdf.js"></script>

<script src="../js/pdf.worker.js"></script>

<script>

    /*将请求来的base64编码的pdf文件，替换多余的空格和换行（为了兼容其他浏览器）

    * 再使用浏览器自带的atob()的方式解析

    * */

    /*转化编码格式*/

    function converData(data) {

        data = data.replace(/[\n\r]/g, '');

        var raw = window.atob(data);

        var rawLength = raw.length;

        var array = new Unit8Array(new ArrayBuffer(rawLength));

        for (var i = 0; i < rawLength; i++) {

            array[i] = raw.charCodeAt(i)

        }

        return array

    }

    /*将解码后的值传给PDFJS.getDocument(),交给pdf.js处理*/

    function showPdfFile(data) {

        var fileContent = converData(data);

        $('#container').show();

        $('#pop').empty();

        PDFJS.getDocument(fileContent).then(function getPdfHelloWorld(pdf) {

            pages = pdf.numPages;

            for (var i = 1; i < pdf.numPages; i++) {

                var id = 'page-id' + i;

                $('#pop').append('<canvas id="' + id + '"></canvas>');

                showAll(url, i, id)

            }

        })

    }

    function showAll(url, i, id) {

        PDFJS.getDocument().then(function getPdfHelloWorld(pdf) {

            pdf.getPage(page).then(function getPageHelloWorld(page) {

                var scale = 1.0,

                    viewport = page.getViewport(scale),

                    canvas = document.getElementById(id),

                    context = canvas.getContext('2d');

                canvas.height = viewport.height;

                canvas.width = viewport.width;

                var renderContext = {

                    canvasContext: context,

                    viewport: viewport

                }

                page.render(renderContext)

            })

        })

    }

</script>

</body>

</html>

　　

												


											
base64编码后的pdf文件前端页面展示--pdf.js的应用的更多相关文章
	

    
								
  1. 怎么给PDF文件交换页面
		
    在使用PDF文件的时候有文件页面的排版错误的时候,这个时候就需要交换页面了,那么怎么给PDF文件交换页面呢,在使用PDF文件的时候需要交换页面的时候要怎么做呢,下面小编就为大家分享一下PDF文件交换页 ...
    
		
    2. 
						
  2. 如何编辑PDF文件，怎么使用PDF裁剪页面工具
		
    在编辑PDF文件的时候,往往会有很多的小技巧可以使用,在编辑PDF文件的时候,怎么对文件的页面进行裁剪呢,不会的话,看看下面的文章吧,小编已经为大家整理好了哦. 1.打开运行PDF编辑器,在编辑器中打 ...
    
		
    3. 
						
  3. Base64编码后通过Url传值
		
    Base64编码简介 Base编码使用"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",再加上补 ...
    
		
    4. 
						
  4. base64编码的字符串(含有中文) 前端解码
		
    base64编码的字符串(含有中文) 前端解码 https://xue5602.github.io/2018/12/19/atob%E8%A7%A3%E7%A0%81utf-8%E5%AD%97%E7 ...
    
		
    5. 
						
  5. PDF文件编辑技巧之PDF书签怎么设置
		
    纸质的文件想要添加书签就直接拿笔书写就可以,Word文件怎么添加书签相信大家也都知道,那么PDF文件的书签要怎么设置的呢,是不是有很多小伙伴不知道该怎么做呢,不要担心,今天小编就来跟大家分享一下在PD ...
    
		
    6. 
						
  6. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html
		
    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...
    
		
    7. 
						
  7. PDF文件怎么修改，PDF文件编辑方法
		
    PDF文件是一种独特的文件,在日常办公中已经成为我们使用最广泛的电子文档格式.在使用PDF文件中会遇到PDF文件有错区的时候,再从新制作一个PDF文件会比较麻烦,只能通过工具来对PDF文件进行修改,这 ...
    
		
    8. 
						
  8. Java利用Base64编码和解码图片文件
		
    1.编码与解码代码如下所示: import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import jav ...
    
		
    9. 
						
  9. JS中使用base64编码上传下载文件
		
    下载文件:使用FileSaver.js   https://github.com/eligrey/FileSaver.js/blob/master/README.md 手机端UC浏览器无法下载  安卓 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 剑指Offer：把数组排成最小的数【45】
			
    剑指Offer:把数组排成最小的数[45] 题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如,输入数组是{3.32.321},则打印出来的这3 ...
    
			
    2. 
						
  2. HTML语义化理解
			
    对所要表达的事物或者思想使用正确的标签. 例如:标题用<h > 来表示. 在<table>中加入summary的简介.   在<a>中加入title 在<im ...
    
			
    3. 
						
  3. java语言中Object对象的hashCode()取值的底层算法是怎样实现的
			
    Java语言中,Object对象有个特殊的方法:hashcode(), hashcode()表示的是JVM虚拟机为这个Object对象分配的一个int类型的数值,JVM会使用对象的hashcode值来 ...
    
			
    4. 
						
  4. 51nod 1610
			
    题目 神犇题解 所以说鄙人的姿势水平完全不够啊OTZ. 很naive的想法是O(T*v*m)的,据说卡一卡可以过去.题目要求的东西其实是这个: $ \sum\limits_{i = 1}^v {\mu ...
    
			
    5. 
						
  5. JAVA- continue与break与return关键字
			
    continue与break关键字 for(int i=0;i<10;i++){ if(i%2==0){ continue; //跳过当前循环执行下一次循环 } System.out.print ...
    
			
    6. 
						
  6. JS事件派发器EventEmitter
			
    原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html 需求 随着Browser客户端JS越来越复杂,MVC(Client端)设计 ...
    
			
    7. 
						
  7. riverbed 流量分析——还是在基于流量做运维
			
    from:https://www.riverbed.com/sg/digital-performance/index.htmlMaximise Your Digital PerformanceConn ...
    
			
    8. 
						
  8. Linux_服务器_03_xxx is not in the sudoers file.This incident will be reported.的解决方法
			
    1.切换到root用户下,怎么切换就不用说了吧,不会的自己百度去. 2.添加sudo文件的写权限,命令是:chmod u+w /etc/sudoers 3.编辑sudoers文件vi /etc/sud ...
    
			
    9. 
						
  9. hdu-5858 Hard problem(数学)
			
    题目链接: Hard problem Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Othe ...
    
			
    10. 
						
  10. hdu-5805 NanoApe Loves Sequence(线段树+概率期望)
			
    题目链接: NanoApe Loves Sequence Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 262144/131072  ...
    
			
    11.