线上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地址要先转为二进制.

亲测有效!

这是在界面显示的样子

相关推荐
其实秋天的枫1 小时前
【2026年】新大纲普通话考试真题题库50套(PDF电子版)
经验分享·pdf
小美丽1232 小时前
苹果Mac电脑下给PDF盖电子印章的方法—Mac批量盖电子印章/盖骑缝章的方法
pdf·电脑
m0_6948455721 小时前
opendataloader-pdf部署教程:构建PDF数据处理系统
服务器·前端·前端框架·pdf·开源
asdzx671 天前
C#:从 URL 下载 PDF 文档到本地
开发语言·pdf·c#
开开心心就好1 天前
经典塔防游戏移植移动端随时畅玩
java·前端·科技·游戏·edge·django·pdf
其实秋天的枫1 天前
【考研408】考研计算机408统考历年真题及答案解析PDF电子版(2009-2026年)
经验分享·pdf
Olafur_zbj1 天前
【python】PDF文件翻译
网络·python·pdf
ZHENGZJM1 天前
文档解析器:支持 PDF、DOCX、Markdown
react.js·pdf·全栈开发
其实秋天的枫1 天前
【管综】考研199管理类综合联考历年真题及答案解析PDF电子版(2009-2026年)
经验分享·pdf