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

我先说一下我的需求：由于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. 多线程(三)  iOS中的锁
			
    锁的类别:互斥锁,递归锁,条件锁,自旋锁等 锁的实现方式:NSLock,NSRecursiveLock, NSConditionLock,@synchronized,GCD的信号量等 下面说一下常用的 ...
    
			
    2. 
						
  2. HTML5/CSS3动画下拉菜单
			
    在线演示 本地下载
    
			
    3. 
						
  3. IIS 7.5 虚拟主机独立用户的配置.
			
    1:新建用户 2:打开 IIS->功能视图->打开编辑身份验证->匿名身份验证,点右边编辑->匿名用户标识中选"特定用户"->确定. 3:编缉网站的权 ...
    
			
    4. 
						
  4. POJ2278 DNA Sequence —— AC自动机 + 矩阵优化
			
    题目链接:https://vjudge.net/problem/POJ-2778 DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Tota ...
    
			
    5. 
						
  5. Spring Boot2.0之整合Mybatis
			
    我在写这个教程时候,踩了个坑,一下子折腾到了凌晨两点半. 坑: Spring Boot对于Mysql8.1的驱动支持不好啊 我本地安装的是Mysql8.1版本,在开发时候.pom提示不需要输入驱动版本 ...
    
			
    6. 
						
  6. java中indexOf()
			
    Java中字符串中子串的查找共有四种方法,如下:1.int indexOf(String str) :返回第一次出现的指定子字符串在此字符串中的索引. 2.int indexOf(String str ...
    
			
    7. 
						
  7. kvm初体验之三：vm的安装及管理
			
    Host: CentOS release 6.4 (Final) Guest: CentOS release 6.6 (Final) 全程以root身份操作 1. host上创建桥br0 参考< ...
    
			
    8. 
						
  8. the art of seo(chapter ten)
			
    Mobile, Local, and Vertical SEO ***The Mobile Landscape***Mobile site speed:• Google Page Speed Insi ...
    
			
    9. 
						
  9. redis压力测试详解
			
    redis做压测可以用自带的redis-benchmark工具,使用简单,效果也比较不错. linux下一般无需下载,windows下redis-benchmark压力测试工具下载地址:http:// ...
    
			
    10. 
						
  10. 《java编程思想》：设计模式（不定期更新）
			
    1.策略设计模式 创建一个能够根据所传递的参数对象的不同而具有不同的方法,被称为策略设计模式.这类方法包含索要执行的算法中固定不变的部分,而“策略”包含变化的部分.策略就是传递进去的参数对象.在下面的 ...
    
			
    11.