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. getContextPath、getServletPath、getRequestURI，getRealPath的区别

    假定你的web application 项目名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下 ...

  2. Python基础入门-元祖

    其实,元组合列表的特性和使用几乎差不太多,今天我们重点来看下元组的一些操作和使用. 1.元祖的定义和特点 定义:元组是以小括号包围,元素以逗号分隔,不可变的序列之一. 特点: 1)元祖内的元素不可以增 ...

  3. 很好的QSqlDatabase问题说明，关于连接错误（转）

    QSqlDatabasePrivate::addDatabase: duplicate connection name 'qt_sql_default_connection', old connect ...

  4. （转）什么？你还不会写JQuery 插件

    原文地址:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jque ...

  5. SQL之TCL

    TCL(Transaction Control Language)事务控制语言 COMMIT  提交SAVEPOINT 设置保存点ROLLBACK  回滚SET TRANSACTION

  6. delphi声明类及其调用方法

    {type放在interface下的uses引用单元下面} 1 // 声明类 type TMyclass = class //注意这里不能加';' 因为这是个整体 data: integer; //类 ...

  7. C#截取验证码图片

    使用Graphics类中的DrawImage方法,这个方法有30种重载方式,这里只介绍一种,也是我认为最直观的一种,代码如下: using System.Drawing; namespace kq.U ...

  8. Nginx开发HTTP模块入门

    Nginx开发HTTP模块入门 我们以一个最简单的Hello World模块为例,学习Nginx的模块编写.假设我们的模块在nginx配置文件中的指令名称为hello_world,那我们就可以在ngi ...

  9. 数值限制------c++程序设计原理与实践（进阶篇）

    每种c++的实现都在<limits>.<climits>.<limits.h>和<float.h>中指明了内置类型的属性,因此程序员可以利用这些属性来检 ...

  10. winform datagridview某一列设为自动宽度

    如果用displayedcells只会使看见的数据自动列宽,滚动条往下发现后面的没有自动列宽,所以要用allcells就不会出现这个问题