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. Densely Connected Convolutional Networks（緊密相連卷積網絡）

    - Dense blocks where each layer is connected to every other layer in feedforward fashion(緊密塊是指每一個層與每 ...

  2. jQuery bind() live()

    <script type="text/javascript"> $(document).ready(function () { /*$('.clickme').live ...

  3. 【C#】is 和 as

    看个例子: public class User { } public class Group { } class Program { static void Main(string[] args) { ...

  4. 微信AES-128-CBC加密解密

    [TestClass] public class UnitTest1 { [TestMethod] public void TestMethod1() { var key = "cheaye ...

  5. .Net Core .Net Core V1.0 创建MVC项目

    .Net Core V1.0 创建MVC项目 创建MVC项目有两种方式: 一.创建Web项目:(有太多没用的东西要去删太麻烦) 2.项目目录结构: 此种方法要注意的是,会创建好多个json文件,下面就 ...

  6. 跳转iPhone设置页面，绕过审核

    1.问题描述 跳转iPhone设置页面之前都是通过 App-Prefs:root=WIFI 来跳转,但是2018年6月废弃了这个函数,被认为是私有函数,审核会被拒绝. 有心人采用了字符串转码的方式来规 ...

  7. retain, copy, assign区别

    1.retain, copy, assign区别 假设你用malloc分配了一块内存,并且把它的地址赋值给了指针a,后来你希望指针b也共享这块内存,于是你又把a赋值给(assign)了b.此时a 和b ...

  8. bzoj 3864: Hero meet devil（dp套dp）

    题面 给你一个只由\(AGCT\)组成的字符串\(S (|S| ≤ 15)\),对于每个\(0 ≤ .. ≤ |S|\),问 有多少个只由\(AGCT\)组成的长度为\(m(1 ≤ m ≤ 1000) ...

  9. MyBatis介绍及使用

    一.介绍: 1.MyBatis实际上是Ibatis3.0版本以后的持久化层框架[也就是和数据库打交道的框架]! 2.和数据库打交道的技术有: 原生的JDBC技术--->Spring的JdbcTe ...

  10. 快速排序（一） 思想 JAVA实现

    已知数组59.71.37.56.88.96.21.58.48.43 采用快速排序将数组有序. 快速排序同样采用了“分治策略”,使用递归的思路来实现算法. 快速排序的算法思想: 9.71.37.56.8 ...