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. Reportng 的测试报告在 Jenkins 中显示不全

    通过Jenkins执行接口测试生成测试报告,用Jenkins的web服务打开html显示不全. 环境: Jenkins版本:1.651.2 Jenkins发布在mac上面 使用的是testng管理测试 ...

  2. JavaEE互联网轻量级框架整合开发（书籍）阅读笔记（5）：责任链模式、观察者模式

    一.责任链模式.观察者模式 1.责任链模式:当一个对象在一条链上被多个拦截器处理(烂机器也可以选择不拦截处理它)时,我们把这样的设计模式称为责任链模式,它用于一个对象在多个角色中传递的场景.   2. ...

  3. JAVA的IO处理【转】

    I/O简介 IO是输入和输出的简称,在实际的使用时,输入和输出是有方向的.就像现实中两个人之间借钱一样,例如A借钱给B,相对于A来说是借出,而相对于B来说则是借入.所以在程序中提到输入和输出时,也需要 ...

  4. Android Tablayout属性介绍

    1.添加依赖 compile 'com.android.support:design:26.0.0-alpha1' 2.属性 改变选中字体的颜色app:tabSelectedTextColor=&qu ...

  5. HTML 5与CSS 3权威指南(第2版·上册) 中文pdf扫描版​

    HTML5与CSS3权威指南(第2版·上册)已经成为HTML 5与CSS 3图书领域的一个标杆,被读者誉为“系统学习HTML 5与CSS 3技术的最佳指导参考书之一”和“Web前端工程师案头必备图书之 ...

  6. Django不能使用ip方式访问的解决办法

    问题: 启动服务后,使用http://127.0.0.1:8000/showcase/或者http://localhost:8000/showcase/都能访问, 但是使用http://192.168 ...

  7. 百度云BDCloudVideoView播放器的初体验

    今天试用了一下百度云BDCloudVideoView,记录下遇到的坑. 前面一切还好,按照他的要求各种导入,然后开始码代码,起实就是抄例子.然后各种坑开始了 下面这个你看名称能知道它是个啥吗? mVi ...

  8. swagger接口文档

    1 在Visual Studio 中创建一个Asp.NET  WebApi 项目,项目名:Com.App.SysApi(本例创建的是 .net 4.5 框架程序) 2  打开Nuget 包管理软件,查 ...

  9. .Net Core 自动化部署：使用docker版jenkins部署dotnetcore应用

    安装docker版jenkins 因为jenkins的docker版本本身没有 dotnetcore的环境,所以我们需要先自己动手制作下包含dotnet环境的jenkins Docker Contai ...

  10. kali linux之主动信息收集（三层发现，四层发现）

    三层发现: 比二层发现的优点即可路由,就是速度比二层慢,相对我们来说还是算快的,经常被边界防火墙过滤 ip icmp协议 OSI七层模型