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

亲测有效!

这是在界面显示的样子

相关推荐
hu55667983 小时前
Adobe Acrobat DC 如何按页数方法拆分2个或多个pdf
pdf·pdf拆分
夏沫琅琊4 小时前
Jetpack Compose + 原生 PDF API 从零搭一个 Android 工具应用 (一)
android·pdf·kotlin
慧都小妮子4 小时前
Aspose.Words for JasperReports v26.6 发布,底层Java大升级
java·pdf·报表工具·aspose.words·文档转换·报表导出·jasperreports
qq_422152574 小时前
PDF页面管理的几种实用方法:拆分、合并、删除指定页面
java·前端·pdf
复园电子1 天前
跨平台PDF签名解析器设计:多方签署与自签名证书(野鸡CA)过滤
pdf·电子合同
AI导出鸭PC端1 天前
预览即导出:告别AI文档格式崩塌,网页预览效果1:1落地Word
人工智能·pdf·word·流程图·豆包·ai导出鸭
hu55667981 天前
小规模纳税人财务报表报送后如何导出报送pdf
pdf
__zRainy__1 天前
基于计数信号量(Counting Semaphore)的 PDF 渲染并发控制方案
pdf
工具派1 天前
从 git commit 到交付 PDF:我的一条在线工具流实录
git·elasticsearch·pdf
Li Ming&2 天前
Python办公自动化:利用Python批量将PDF转换为图片文件
python·pdf·pip