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

亲测有效!

这是在界面显示的样子

相关推荐
驯龙高手_追风14 小时前
Adobe Acrobat PDF阅读器设置默认滚动翻页
adobe·pdf·adobe acrobat reader·adobe reader
优化控制仿真模型20 小时前
【26年社工】初级社会工作者历年真题及答案PDF电子版(2010-2025年)
经验分享·pdf
ComPDFKit20 小时前
PDF发票生成怎么做?从零到服务化落地的完整指南
pdf·pdf生成·文件生成·发票生成
weixin_441003641 天前
【2026年最新】初级社会工作者(社工)考试历年真题及答案解析电子版pdf(2010-2025年)
pdf
优化控制仿真模型1 天前
【26年7月】日语N1、N2、N3、N4、N5历年真题及答案PDF电子版(2010-2025年12月)
经验分享·pdf
jianwuhuang821 天前
智谱清言怎么导出pdf
人工智能·chatgpt·pdf·豆包·deepseek·ai导出鸭
daanpdf1 天前
专科英语A级和B级考试历年真题试卷及答案PDF电子版
pdf
南风微微吹2 天前
2015-2025年英语四级历年真题及答案解析电子版PDF(含听力音频)
pdf·英语四级
Metaphor6922 天前
使用 Python 将 Excel 转换为 PDF
python·pdf·excel
daanpdf2 天前
考研英语一历年真题及答案解析PDF(2010-2026)百度网盘
考研·pdf