页面PDF文件格式预览(不使用pdf.js)

复制代码
<div id="pdfContainer"></div>

2.方法1

复制代码
var pdfUrl =downloadUrl; // 获取PDF的URL
var iframe = document.createElement('iframe'); // 创建iframe元素
iframe.src = pdfUrl; // 设置iframe的src属性为PDF的URL
iframe.style.width = '100%'; // 设置iframe的宽度和高度
iframe.style.height = '600px';
document.getElementById('pdfContainer').appendChild(iframe)

3.方法2

复制代码
var iframe = document.createElement('iframe'); // 创建iframe元素
iframe.src = pdfUrl; // 设置iframe的src属性为PDF的URL
iframe.style.width = '100%'; // 设置iframe的宽度和高度
iframe.style.height = '600px';
$.ajax({
    url: pdfUrl,
    type: 'GET',
    xhrFields: {
        responseType: 'blob'
    },
    success: function(data) {
        const blob = new Blob([data], { type: 'application/pdf' }); //重点
        const url = window.URL.createObjectURL(blob);
        document.getElementById('pdfContainer').src = url;
    }
});
相关推荐
Android疑难杂症11 小时前
一文讲透鸿蒙开发应用框架体系
前端·harmonyos
文西29511 小时前
this函数的指向问题
javascript
代码搬运媛11 小时前
前端使用 docx-preview 实现word解析实战
前端
有点笨的蛋11 小时前
JavaScript Promise 机制解析
前端·javascript
Qiuner12 小时前
2025汉化idea创建JSP项目
前端·tomcat·firefox·idea·jsp
JarvanMo12 小时前
Flutter 的内存是怎么回事儿,简单给你讲明白——它给那些Widget分配和释放内存的机制
前端
烟袅12 小时前
🎯 `:nth-child` vs `:nth-of-type`:CSS 伪类的“兄弟之争”
前端·css
一水鉴天12 小时前
整体设计 全面梳理复盘之30 Transformer 九宫格三层架构 Designer 全部功能定稿(初稿)之2
前端·人工智能
有一棵树12 小时前
初级 Vue 前端开发者的命名与代码规范指南
前端
VcB之殇12 小时前
【three.js】实现玻璃材质时,出现黑色/白色像素噪点
前端·three.js