js实现展示pdf的多种方法

转载https://blog.csdn.net/weixin_44326389/article/details/103736109

1.jquery插件

1.1 jquery.media.js

[参考地址]https://justcoding.iteye.com/blog/2163072

1.2 jquery.viewer.min.js

[参考地址]https://blog.csdn.net/qq_29132907/article/details/80136023

2.vue-pdf

[参考网址]https://www.cnblogs.com/lodadssd/p/10297989.html
安装

复制npm install --save vue-pdf

使用
在这里插入图片描述

3.iframe(项目中可能会出现同源策略)

在这里插入图片描述

4.pdf.js(该插件需要放到服务器上才能使用)

①后台返回已经生成的pdf,前台直接展示var url = ‘后台返回的url’;//后台生成的图片路径****.pdf

复制window.location.href = 'pdfjs在服务器上的路径/viewer.html?file='+url
1

②后台返回base64,前台转成pdf(小编暂时没有整出来,不过听公司大神说曾经实现过)

5.pdfh5.js

在这里插入图片描述

复制<div class="pdfContent"></div>
pdfh5.js需要下载多个依赖文件,引入时别落下哟~
pdfh5.js是将base64流转换成jpeg格式进行展示的

在这里插入图片描述

6.最直接的方法

复制window.location.href = url
posted @   小小咸鱼YwY  阅读(3873)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
历史上的今天:
2019-11-01 爬虫selenium中动作链接ActionChains
2019-11-01 爬虫selenium中截图
欢迎阅读『js实现展示pdf的多种方法』

目录导航

点击右上角即可分享
微信分享提示