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

亲测有效!

这是在界面显示的样子

相关推荐
诸葛大钢铁16 小时前
PDF无法编辑?移除PDF权限的两种方法
经验分享·pdf·pdf权限限制·pdf无法编辑
Felicia-侧听17 小时前
PDF不能打印怎么办?在线解决PDF限制的两个方法
pdf·浏览器·限制打印·限制复制
敲代码娶不了六花17 小时前
Microsoft Print to PDF | Edge打印导出的pdf文件为0kb | 文件异常
pdf
程序员阿明17 小时前
spring boot3识别PDF图纸
java·spring boot·后端·pdf
其实秋天的枫18 小时前
【26年最新】英语六级2015-2025年12月历年真题及答案PDF+六级核心词汇
经验分享·pdf
一晌小贪欢18 小时前
PyQt5 开发一个 PDF 批量合并工具
开发语言·qt·pdf
Metaphor69219 小时前
使用 Python 将 PowerPoint 转换为 PDF
python·pdf·powerpoint
优化控制仿真模型21 小时前
【考研408】考研计算机408统考历年真题及答案解析PDF电子版(2009-2026年)
经验分享·pdf
一位代码21 小时前
python | PyPDF2 实现 pdf 的拆分与合并
pdf
百事牛科技2 天前
保护文档安全:PDF限制功能实操方法
windows·pdf