## 如何前端显示pdf的base64文件?
后台返回pdf的base64字段,可以用pdf.js展示,完整代码如下,文末附上完整可以运行代码包
```
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="application/x-javascript; charset=utf-8"/>
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<script>
//PDF.js插件定义的对象,给定pdf文件的URL或者一个Uint8Array数组,调用PDFJS.getDocument()可以获取
var pdfDoc = null;
//缩放比例
var scale = 1.5;
//pdf文件的总页数
var count = 1;
$(document).ready(function() {
var data = char2buf(window.atob($("#pdfCache").text()));
PDFJS.getDocument(data).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
count = pdfDoc.numPages;
//绘制所有的页面
renderAll();
});
});
function renderAll(){
for(var curPage=1;curPage<=count;curPage++){
//新建一个<canvas>用于,并将对应页面的内容绘制到这个canvas上
var canvas = document.createElement("canvas");
var div = document.createElement("div");
$(div).attr("id","page"+curPage);
$(div).attr("class","page");
$(div).append(canvas);
$("#pdfContainer").append(div);
renderPage(curPage,canvas);
}
}
function renderPage(num,canvas) {
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext : ctx,
viewport : viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
//这是每次绘制一页内容之后的回调函数
console.log("Page"+num+" rendered");
});
});
}
function zoomOut(){
scale+=0.4;
$("#pdfContainer").empty();
renderAll();
}
function zoomIn(){
scale-=0.4;
$("#pdfContainer").empty();
renderAll();
}
/*string -> Unit8Array*/
function char2buf(str){
var out = new ArrayBuffer(str.length);
var u16a= new Uint8Array(out);
var strs = str.split("");
for(var i =0 ; i<strs.length;i++){
u16a[i]=strs[i].charCodeAt();
}
return u16a;
}
</script>
<title>LoadPDF_fromArrayBuffer</title>
</head>
<body>
<div>
<button onclick="zoomOut()">放大</button>
<button onclick="zoomIn()">缩小</button>
</div>
<div id="pdfContainer"></div>
<div id=pdfCache style=display:none;>------这里是pdf的base64码,如JVBERi0xLjcKJcKzx9gNCjEgxxxxxxx-------
<!--如需运行,可以下载文末代码包 -->
</div>
</body>
</html>
```
## 完整可运行代码包
链接:https://pan.baidu.com/s/1Q-l06Ys8gfkXqhdrkWfoNw
提取码:3g0f
- php7性能优化
- php代码性能常见优化技巧
- PHP对象在内存中的分配
- PHP7垃圾回收机制详解
- 细说php5和php7垃圾回收区别
- php核心技术与实战
- 传值与传引用的区别
- php7语法糖好甜,让你迷上魔术方法
- php7魔术方法__call的最佳实战
- 精通PHP正则表达式,看这一篇就够啦!
- 不懂对象设计原则,都不好意思自称php大师
- socket通信很难?这一文让你轻松搞懂
- 详解CGI,FastCGI,php-fpm三者区别与联系
- php7.2编译安装与环境搭建
- php-fpm的配置和优化
- linux php扩展安装示例-redis扩展安装
- phpstorm配置Xdebug最完整教程,绝对成功
- PHP利用Mysql锁解决高并发问题
- 设计模式
- 注册模式
- 创建型模式
- 简单工厂模式
- 工厂方法模式
- 抽象工厂模式
- 三种工厂模式比较
- 建造者模式
- 单例模式
- 结构性模式
- 外观模式
- 适配器模式
- 代理模式
- 组合模式
- 享元模式
- 装饰模式
- 桥模式
- 行为型模式
- 中介者模式
- 观察者模式
- 命令模式
- 迭代器模式
- 模板方法模式
- 策略模式
- 状态模式
- 备忘录模式
- 解释器模式
- 职责链模式
- 访问者模式
- Thinkphp5.1钩子与行为
- composer
- 当本地安装的composer是2.x,而项目需要composer1.x
- php中的数种依赖注入
- 访问控制权限
- Casbin基础知识
- thinkphp5+webuploader实现大文件分片上传
- 多线程
- 基于PCNTl扩展的PHP多进程管理库
- 后端开发必备
- 理解TCP/IP与UDP协议、Socket的正确姿势
- 进程线程,CPU核心数,时间片轮转机制解读
- IO多路复用的三种机制:select 、poll 、epoll
- gitlab搭建企业级私有的版本控制环境以及使用,亲测有效
- 深入浅出,轻松搞懂HTTPS工作原理
- 计算机基础
- 状态机
- 逆波兰表达式
- 网络与协议
- 网站安全
- CSRF跨站点伪造请求攻击
- ssh连接服务器报错:server responded “Algorithm negotiation failes” 解决办法
- 何使用Nativefier将web页面打包为桌面应用
- Nginx进阶
- nginx Location匹配规则详解
- nginx rewrite规则详解
- nginx进程模型及相关配置
- nginx分流实战
- Nginx反向代理
- nginx反向代理配置去除前缀
- nginx跨域配置
- nginx缓存以及gzip配置
- 深入理解浏览器缓存
- nginx配置https
- nginx+lua实现nginx高级应用
- lvs+nginx高可用负载均衡
- nginx安装与配置
- Mysql深度优化
- Mysql存储引擎MYISAM和INNODB选择
- mysql共享锁及排它锁
- mysql事务及隔离级别
- mysql底层BTree与B+Tree实现原理
- mysql索引详解
- mysql最全索引优化建议
- sql执行计划explain详解
- Mysql高可用-主从复制
- mysql+keepalive高可用方案操盘实战
- MySQL数据库分库分表方案
- MySQL常见问题解决办法汇总
- mysql函数
- ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
- 递归查询
- 方案1
- 方案2
- 方案3
- 树形结构表3种设计分析
- 树形结构左右值
- MYSQL分布式锁XA实战
- 复杂sql
- 高并发实战
- 系统如何支撑高并发
- 解决高并发问题
- 千万级PV网站架构
- js高级应用实例
- 如何前端显示pdf的base64文件
- vue history模式在nginx环境配置
- webuploader多图上传
- mycat
- Mycat简介
- 工具包
- 如何通过PhpSpreadsheet读取和写入Excel
- 常用方法实现
- php百万级大数据量如何成功并高效导出
- 如何高准确率的下载远程图片到本地
- ase加解密
- php rsa
- tree类
- 获取方法执行内存空间和执行时间
- phpspreadsheet 中文文档(五)节约内存
- pdf生成文字水印
- redis进阶
- 详解Redis中两种持久化机制RDB和AOF,吊打面试官
- redis缓存穿透,缓存击穿,缓存雪崩的解决方法以及代码实现
- 巧用 Bitmap 实现亿级海量数据统计
- 延时队列
- linux应用
- linux tar打包大文件并分割传输另一台linux服务器
- 阿里云服务器如何不关机磁盘扩容
- 基础知识
- linux启动过程
- SIGKILL和SIGTERM、SIGINT
- 解决linux虚拟机不能上网的问题
- vm虚拟机下centos7挂载windows共享目录
- 开机自启配置文件
- elastic
- 什么是Elastic
- 安装并运行Elasticsearch
- kibana实现es数据可视化
- Elasticsearch的“crud”操作
- 简单检索
- 表达式检索
- 全文搜索
- 短语搜索
- 高亮搜索
- 聚合分析
- 区块链
- php实现简易版区块链
- Paxos的通俗理解及其在数据库高可用上的使用
- 桌面开发Electron
- 快速入门
- hello word应用
- 打包并分发hello word应用程序
- 渲染进程显示通知
- docker教程
- 入门
- hello world
- 容器文件
- Dockerfile 文件
- 其他常用命令
- docker微服务
- 搭建lnmp环境
- swoole
- windows安装swoole
- mysql连接池
- 应用实例
- 进程 线程 协程
- 守护进程
- 通过 Supervisor实现php脚本守护进程服务
- swoole是怎么支持php语法的,phpstorm增加Swoole代码智能提示
- phpswoole docker安装
- rabbitmq
- windows10环境下的RabbitMQ安装步骤(图文)
- 教程
- rabbitMq 保证消息可靠性
- thinkphp6使用rabbitmq
- 微服务
- 微服务入门
- php使用Yar实现RPC调用
- 算法
- 斐波拉契
- 文件目录
- thinkphp
- thinkphp 6 消息队列
- 机器学习
- 数据类型
- 均值、中值和众数
- 方差、标准差
- 百分位数
- swoft
- swoft配置连接池
- docker 安装 swoft
- 创建entity
- 中间件
- 模型join
- 模型关联
- 事件
- 打印出swoft的所有sql日志到控制台或者文件
- 事件触发
- 文件
- 下载
- 在浏览器读取文件
- 文件上传
- 验证器
- 非注解式验证
- alias
- excel
- excel保存
- rpc
- phpstorm
- PHPSTORM 与 LINUX 搭建PHP项目运行环境