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

亲测有效!

这是在界面显示的样子

相关推荐
FOAF-lambda9 小时前
Python实战:基于OpenCV与单调栈,精准定位PDF中最大的空白区域
python·opencv·pdf
2501_9307077813 小时前
使用C#代码在 PDF 文档中创建交互操作
pdf·c#·交互
Metaphor69213 小时前
Python 自动化办公:如何轻松在 PDF 中导入与导出表单数据
python·pdf·自动化
weixin_448771721 天前
使用Aspose给PDF添加水印
java·pdf
魔都吴所谓1 天前
【我的开源】Python实现一个离线 PDF 工具箱:架构、骑缝章与踩坑记录
python·pdf·开源
凯程序猿1号1 天前
SafeDRM 的视频和 PDF 如何做跨设备交付验证?
pdf·电脑
学术 学术 Fun1 天前
没有 Visio 怎样打开 VSDX?从查看、审阅到导出 PDF
pdf
五花马印务1 天前
个人书稿交付印刷前,文件格式要规范什么?(Word/PDF/ 字体 / 出血)
pdf·个人出书
指针向南2 天前
PDF转长图用什么?3种方法实测(2026)
图像处理·人工智能·计算机视觉·pdf
GlobalTradercrb3 天前
独立站SEO先写博客还是先优化产品页?看站点阶段
数据库·人工智能·google·pdf·go·seo