页面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;
    }
});
相关推荐
luckyPian4 小时前
前端+AI:HTML5语义标签(一)
前端·ai·面试·html·html5·ai编程
普通码农4 小时前
Vue3 + dom-to-image 实现高质量截图复制与下载功能
前端
王六岁4 小时前
🐍 前端开发 0 基础学 Python 入门指南:数字与字符串篇
前端·python·全栈
over6974 小时前
JavaScript恋爱物语:当代码学会送花,对象字面量也能当红娘!
javascript
tiantian_cool4 小时前
HarmonyOS 开发环境配置指南 - macOS 版
前端
写不来代码的草莓熊4 小时前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
tiantian_cool4 小时前
正确的 .gitignore 配置
前端·github
三小河4 小时前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字4 小时前
ESLint 导入语句的分组排序
前端·javascript