PDFObject.js,在页面显示PDF文件

PDFObject的官网:

https://pdfobject.com/

使用pdfobject.js实现在线浏览PDF
https://blog.csdn.net/beyond__devil/article/details/78826826
PDFobject.js官方api简易说明
https://blog.csdn.net/badgirl_hong/article/details/53139478

PDF预览之PDFObject.js总结
https://blog.csdn.net/i_dont_know_a/article/details/80707963
http://www.cnblogs.com/pejsidney/p/9019143.html

PDFObject插件不能加载远程链接的问题
https://blog.csdn.net/liujun_for_java/article/details/85172817

2.前端预览PDF:PDFObject、PDF.js 之对比
https://blog.csdn.net/liuyaqi1993/article/details/77822946

实战:
1.引入js
<script type="text/javascript" src="../build/pdfobject.js"></script>
2.html

<div id="pdfs">
</div>

3.js

var string = window.location.search; //获取url过来的参数
    // console.log(string)
    var str = string.split('=')[1];
    // console.log(str)
    var s = str.split("+")
    // console.log(s)
    if (typeof(s[2]) == 'undefined' || s[2] =='') {
        s[2] = false;
    }
    // var url = s[0] +"filepreview/loadFileByPdfObject?fileId=" + s[1];
    var url = s[0] +"filepreview/loadFile?isNeedWaterMark="+ s[2]+"&fileId=" + s[1];
    var op = {
        withd:"920px",
        height:"460px"
    }
    console.log(url);
    // 我的pdf文件放在项目的pdf文件夹下,名字叫做Java.pdf
    PDFObject.embed("Java.pdf", "#my-container", options);
//url为远程连接,也就是后端输出pdf流的地方    
PDFObject.embed(url,'#pdfs',op);
    
   

注意 后端输出需要设置为

response.setContentType("application/pdf;charset=UTF-8");
application:某二进制的一个附件
octet-stream:子类型,不确定下载文件的通用指定
pdf:指定为PDF

代码块




posted on   itjeff  阅读(1701)  评论(0编辑  收藏  举报

编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示