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

我先说一下我的需求：由于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 128 Longest Consecutive Sequence
			
    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...
    
			
    2. 
						
  2. Java for LeetCode 120 Triangle
			
    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
    
			
    3. 
						
  3. js修改div标签中的内容
			
    <div id='divId'>初始文字</div> <script> $(document).ready(function(e){ $('#divId').htm ...
    
			
    4. 
						
  4. wordpress，cos-html-cache静态化后，点击数失效问题的解决方案
			
    装了wordpress cos-html-cache 静态插件后,生成了静态文件,post-views等点击数插件就失效了, 找了一些,包括有个js版本的,需要用到post-views插件,我也不想装 ...
    
			
    5. 
						
  5. IDEAL葵花宝典：java代码开发规范插件 Rainbow Brackets 插件
			
    前言: 最近在Jetbrains IDEA插件网站逛发现了 Rainbow Brackets这款插件,非常棒,推荐给大家. 可以实现配对括号相同颜色,并且实现选中区域代码高亮的功能. 对增强写代码的有 ...
    
			
    6. 
						
  6. POJ 2497 Strategies
			
    题意:有三个人,Bill, Steve and Linus,他们参加竞赛,给出竞赛的题目和比赛时间,然后给出每道题需要的时间(他们解同一道题花的时间相同),然后他们有不同的策略来做题.每道题的得分为当 ...
    
			
    7. 
						
  7. NOIP 2014【斗地主】
			
    这真是道大火题. 因为保证数据随机,所以开始很多人直接用搜索 + 贪心水过去了,后来,为了遏制骗分这种不良风气的传播,各大 OJ 相继推出了斗地主加强版-- 正解: 先爆搜顺子,枚举打或不打,打多少张 ...
    
			
    8. 
						
  8. PS 色调— —颜色梯度
			
    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...
    
			
    9. 
						
  9. POJ3417Network（LCA+树上查分||树剖+线段树）
			
    Yixght is a manager of the company called SzqNetwork(SN). Now she's very worried because she has jus ...
    
			
    10. 
						
  10. zero to one (3)
			
    工具使用 AWVS Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的Web网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞. 功能及特 ...
    
			
    11.