0.
A.到官网 https://mozilla.github.io/pdf.js/getting_started/#download 下载最新版本
B 部署到IIS 中访问 pdf.js/web/viewer.html 查看效果

1. 后台返回pdf的base64字段，用pdf.js展示
https://www.jianshu.com/p/8fb76e21b05e

2. 在线查看PDF文件,pdf.js使用方法
https://www.cnblogs.com/zhanggf/p/8504317.html

3.官方实例
https://github.com/mozilla/pdf.js/tree/master/examples/learning

_______________________________________________________________________________________________

大部分都是关于引入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初始化后固定大小，数组则可以自由增减。(准确的说，视图才应该跟数组来比较这个特点)

测试通的 base64 >> PDF 操作

<!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="jquery-1.10.2.js"></script>

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

<script src="../build/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 Uint8Array(new ArrayBuffer(rawLength));

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

array[i] = raw.charCodeAt(i)

}

return array

}

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

var loadtask=null;

function showPdfFile(data) {

var fileContent = converData(data);

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

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

loadtask=pdfjsLib.getDocument(fileContent);

loadtask.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('', i, id);

}

})

}

function showAll(url, i, id) {

loadtask.promise.then(function getPdfHelloWorld(pdf) {

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

var scale = 2.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);

})

})

}

dataParameters={};

$.ajax({

url: 'http://localhost:20737/wind.CloudFile.Web/Home/Base64',

type: "post",

dataType: "json",

data: dataParameters,

beforeSend: function () {

// addLoadingEle();

},

success: function (data) {

console.log( 'msg:'+ JSON.stringify(data));

showPdfFile(data.Data);

},

complete:function(data){

// removeLoadingEle();

},

error: function (a) {

console.log(a);

}

});

</script>

</body>

</html>

PDFJs 在线预览插件的更多相关文章

  1. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  2. 在线预览Word，Excel

    今天在项目中遇到了在线预览word的需求,经过查阅资料与测试发现可以解决问题,特做记录: 方式: http://view.officeapps.live.com/op/view.aspx?src= s ...

  3. .net core 实现excel 和 word 的在线预览

    最新在搞文件的在线预览,网上很多免费的方案都需要是电脑安装office的,这要就很麻烦:收费的插件又太贵了. 不过还是找到一款相对好用的免费在线预览插件. 直接在nuget上搜索ce.office.e ...

  4. 使用pdfjs插件在线预览PDF文件

    前言 本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法. 实现步骤 下载 pdfjs 并引入项目中 到PDFJS官网 http://mozilla.github.io/pdf.js/g ...

  5. .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法

    FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...

  6. 网页嵌入pdf、在线预览pdf工具及插件（转）

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  7. 实现word在线预览 有php的写法 也有插件似

    <?php //header("Content-type:text/html;charset=utf-8"); //word转html 展示 $lj=$_GET['file' ...

  8. 实战动态PDF在线预览及带签名的PDF文件转换

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  9. 动态PDF在线预览

    实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...

随机推荐

  1. 事物处理service层的方法

    package cn.lijun.service; import java.sql.Connection;import java.sql.SQLException; import cn.lijun.d ...

  2. .NET Framework各版本特性一览

    https://msdn.microsoft.com/en-us/library/bb822049.aspx .NET Framework version CL version Features In ...

  3. linux查看进程开始时间

    ps -eo pid,lstart|grep [pid] 命令解释: -e Select all processes. -o,o Specify user-defined format. pid a ...

  4. java代码实现顺序队列

    java实现顺序队列 package xianxinTable; import java.util.ArrayList; import java.util.Iterator; import com.s ...

  5. MySql8.0后密码认证方式问题[caching-sha2-password]

    这个问题通常在laravel中表现为类似下边的异常: local.ERROR: SQLSTATE[HY000] [2006] MySQL server has gone away {"exc ...

  6. MooseFS分布式文件系统介绍

    一.简介 MooseFS是一个具备冗余容错功能的分布式网络文件系统,它将数据分别存放在多个物理服务器或单独磁盘或分区上,确保一份数据有多个备份副本.对于访问的客户端或者用户来说,整个分布式网络文件系统 ...

  7. pch文件配置出现 Expected unqualified-id 和 Unkown type name 'NSString'

    1.发生的现象 之前代码还是没有报错的,由于某些代码比较常用,就打算配置一个pch文件引入常用的文件 但是引入的时候就出现了报错 2.原因与解决办法 2.1 原因 你引入的文件可能使用到OC与C++混 ...

  8. 洛谷P4011 孤岛营救问题（状压+BFS）

    传送门 和网络流有半毛钱关系么…… 可以发现$n,m,p$都特别小,那么考虑状压,每一个状态表示位置以及钥匙的拥有情况,然后每次因为只能走一步,所以可以用bfs求出最优解 然后是某大佬说的注意点:每个 ...

  9. Python基本数据类型集合、格式化、函数

    一.变量总结 1.1 变量定义 记录某种状态或者数值,并用某个名称代表这个数值或状态. 1.2 变量在内存中的表现形式 Python 中一切皆为对象,数字是对象,列表是对象,函数也是对象,任何东西都是 ...

  10. Navicat Premium 12.1.12.0破解版激活

    声明:本文所提供的所有软件均来自于互联网,个人存放在此作为备用,以备将来不时之需,同时作为大家的分享和学习成果,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 附:二 ...