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

我先说一下我的需求：由于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：栈的压入、弹出序列【31】
			
    剑指Offer:栈的压入.弹出序列[31] 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈 ...
    
			
    2. 
						
  2. SpringBoot学习笔记（1）：配置Mybatis
			
    SpringBoot学习笔记(1):配置Mybatis 反思:如果自己写的笔记自己都看不懂,那就不要拿出来丢人现眼! IDEA插件 Free MyBatis Plugin插件可以让我们的MyBatis ...
    
			
    3. 
						
  3. 2018年东北农业大学春季校赛   E	wyh的阶乘 【数学】
			
    题目链接 https://www.nowcoder.com/acm/contest/93/E 思路 其实就是找阶乘的项中5的个数 末尾为什么会出现0 因为存在5的倍数和偶数相乘 有0存在 借鉴 htt ...
    
			
    4. 
						
  4. Java多线程系列 基础篇04 线程中断
			
    1. 中断线程 中断可以理解为线程的一个标志位属性,它表示一个运行中的线程是否被其他线程进行了中断操作,其他线程通过调用该线程的interrupt()方法对其进行中断操作,线程通过检查自身是否被中断来 ...
    
			
    5. 
						
  5. 《avascript 高级程序设计（第三版）》 ---第三章 基本概念2
			
    1.乘性操作符: 1)*法操作法: Infinity * 0 = NaN  Infinity * 非零 = Infinity 或 - Infinity   2)/法操作符: Infinity / In ...
    
			
    6. 
						
  6. 鸟哥的linux私房菜 - 第5/6/7/9章(在线求助 man page、Linux档案权限与目录配置、Linux档案与目录管理、压缩与打包)
			
    第五章.在线求助 man page X window与文本模式的切换 Ctrl+Alt+F1~F6:文字接口登入tty1~tty6终端机: Ctrl+Alt+F7:图形接口桌面. 注销当前用户:exi ...
    
			
    7. 
						
  7. python的writelines读空行
			
    在文件中,如果遇到一个空白行,readline()并不会返回一个空串,因为每一行的末尾还有一个或多个分隔符,因此“空白行”至少会有一个换行符或者系统使用的其他符号.只有当真的读到文件末尾时,才会读到空 ...
    
			
    8. 
						
  8. html5--1.18 div元素与布局
			
    1.18 div元素与布局 1.元素的分类2.div元素与布局 1.元素的分类 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行:通常可以作为容器在内部添加其他元素. 已经学过的块元素有:  ...
    
			
    9. 
						
  9. 分享知识-快乐自己：SpringBoot 使用注解API的方式定义启动端口号
			
    在Spring Boot2.0以上配置嵌入式Servlet容器时EmbeddedServletContainerCustomizer类不存在,经网络查询发现被WebServerFactoryCusto ...
    
			
    10. 
						
  10. 51nod1671【货物运输】
			
    开始天真的我以为这道题和运输计划是一样的套路.于是写了一发,debug后发现过了第一个点,十分开心的交了一发,结果只过了第一个点.后来发现这个并不是一样的,因为修建黑洞之后路径法变了,而运输计划没有( ...
    
			
    11.