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

我先说一下我的需求：由于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. Java for LeetCode 125 Valid Palindrome
			
    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...
    
			
    2. 
						
  2. Java for LeetCode 114 Flatten Binary Tree to Linked List
			
    Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 4 6  ...
    
			
    3. 
						
  3. PAT 甲级 1116. Come on! Let's C (20) 【循环判断】
			
    题目链接 https://www.patest.cn/contests/pat-a-practise/1116 思路 注意一个细节 如果没有本来 ID 的 后来又查了这个ID 不是输出 checked ...
    
			
    4. 
						
  4. Codeforces Round #551 (Div. 2) A~E题解
			
    突然发现上一场没有写,那就补补吧 本来这场应该5题的,结果一念之差E fail了 A. Serval and Bus 基本数学不解释,假如你没有+1 -1真的不好意思见人了 #include<c ...
    
			
    5. 
						
  5. jetty使用jndi数据源
			
    之前将项目正常的数据源统一切换成jndi访问的形式(是将c3p0以mbean形式安装到jboss做的数据连接池), 本地测试用的jetty服务器,为了统一数据库访问部分,我也查看文档找到了jetty提 ...
    
			
    6. 
						
  6. linux下安装svn服务
			
    环境centos6.8 64位: 1.安装svn yum install subversion yum install mod_dav_svn 2.创建svn仓库 mkdie /home/svn 3. ...
    
			
    7. 
						
  7. 在CI框架中的配置整合amfphp
			
    之前做的项目用到CI框架和amfphp的整合,主要用于php与flex的交互,在此做一下记录: 一． 安装CI框架: 1.  搭建PHP运行环境,本人在WIN7下用WAMP作测试,安装目录:d:/wa ...
    
			
    8. 
						
  8. hdu5776sum
			
    题目连接  抽屉原理:如果现在有3个苹果,放进2个抽屉,那么至少有一个抽屉里面会有两个苹果 抽屉原理的运用 现在假设有一个正整数序列a1,a2,a3,a4.....an,试证明我们一定能够找到一段连续 ...
    
			
    9. 
						
  9. hdu-5804 Price List(水题)
			
    题目链接: Price List Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 262144/131072 K (Java/Othe ...
    
			
    10. 
						
  10. 多线程之：java的CAS操作的相关信息
			
    一:锁机制存在的性能问题? 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁(后面的章节还会谈到锁). 锁机制存在以下问题:(1)在多线程竞争下,加锁.释放锁会导 ...
    
			
    11.