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

亲测有效!

这是在界面显示的样子

相关推荐
q***017715 小时前
SpringBoot实战(三十二)集成 ofdrw,实现 PDF 和 OFD 的转换、SM2 签署OFD
spring boot·后端·pdf
嗯、.17 小时前
使用Itext9生成PDF水印,兼容不同生成引擎的坐标系(如: Skia、OpenPDF)
java·pdf·itextpdf·openpdf·坐标变换矩阵
拓端研究室19 小时前
专题:2025AI产业全景洞察报告:企业应用、技术突破与市场机遇|附920+份报告PDF、数据、可视化模板汇总下载
大数据·人工智能·pdf
南风微微吹19 小时前
2026年新大纲普通话考试真题题库50套PDF电子版
pdf·普通话
JHC0000001 天前
Python PDF 相关操作
开发语言·python·pdf
CodeCraft Studio1 天前
ABViewer 16全新发布:3D可视化、PDF转DWG、G-code生成全面升级
pdf
诸神缄默不语2 天前
如何用Python处理文件:Word导出PDF & 如何用Python从Word中提取数据:以处理简历为例
python·pdf·word
i***66502 天前
SpringBoot实战(三十二)集成 ofdrw,实现 PDF 和 OFD 的转换、SM2 签署OFD
spring boot·后端·pdf
777VG3 天前
Vue3+vue3-pdf-app@1.0.3实现加载 .pdf文件
前端·javascript·vue.js·pdf
ComPDFKit3 天前
Salesforce原生PDF编辑的重要性:效率、合规性与用户体验
大数据·pdf·ux