线上PDF文件展示

场景: 请求到的PDF(url链接),将其展示在页面上

插件: pdfobject (我使用的版本: "pdfobject": "^2.2.12" )

下载插件就不多说了,下面将其引入:

javascript 复制代码
<div id="pdf"></div>
javascript 复制代码
import PDFobject from "pdfobject";

这里的this.url 就是请求回来的pdf url地址

javascript 复制代码
  new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", this.url, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
     if (this.status == 200) {
       resolve(this.response);
     } else {
       reject(this.statusText);
     }
   };
   xhr.onerror = function () {
    reject(this.statusText);
   };
   xhr.send();
 }).then((blob) => {
   PDFobject.embed(URL.createObjectURL(blob), "#pdf");
 });

这里的请求回来的url地址要先转为二进制.

亲测有效!

这是在界面显示的样子

相关推荐
优化控制仿真模型4 小时前
【2026年6月最新】英语四级历年真题及答案解析PDF电子版(2015-2025年12月)
经验分享·pdf
开开心心就好8 小时前
进程启动瞬间暂停工具,适合调试多开
linux·运维·安全·pdf·智能音箱·智能手表·1024程序员节
yivifu1 天前
完美的PyMuPDF删除pdf页面文字水印
python·pdf·pymupdf·去水印
weixin_441003641 天前
廖华英《中国文化概况》修订版+批注版+译文版+笔记+课件PPT+配套题库 PDF
笔记·pdf·中国文化概况
Source.Liu1 天前
【office2pdf】office2pdf 纯 Rust 实现的 Office 转 PDF 库
rust·pdf·office2pdf
E_ICEBLUE1 天前
在 Python 中转换 XML 为 PDF 文档:基础转换与转换设置
xml·python·pdf
开开心心就好1 天前
模拟真人手写软件,支持随机调节
运维·服务器·windows·gitee·pdf·开源·excel
予你@。1 天前
vue 使用html2canvas + jsPDF 将html导出为pdf (延伸问题)
vue.js·pdf·html
Lana学习中1 天前
[AI编程]纯前端JS实现评论区自动截图&生成 PDF
前端·javascript·pdf·vibe coding
dy17171 天前
前端PDF下载、打印界面
前端·pdf