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

亲测有效!

这是在界面显示的样子

相关推荐
weixin_6681 天前
Agent 应该中 PDF 工具方案分析报告 - AI分析分享
人工智能·pdf
fjhcom1 天前
PDF与图片互转WEB应用开发教程
前端·pdf·图片·web应用·streamlit
polaris06301 天前
【Spring Boot 实现 PDF 导出】
spring boot·后端·pdf
南风微微吹2 天前
【2026大英赛】全国大学生英语竞赛C类历年真题试卷及答案电子版PDF(2012-2025年)
pdf·大英赛
南风微微吹2 天前
【专八】英语专业八级TEM8历年真题及答案解析电子版PDF(2009-2025年)
pdf·英语专八
西门吹-禅2 天前
【pdf 翻译免费】
pdf
薛定谔之死猫2 天前
Ruby简单粗暴把图片合成PDF文档
java·pdf·ruby
QD_ANJING3 天前
3月面大厂前端岗总结笔记(含答案)
前端·javascript·笔记·面试·职场和发展·前端框架·pdf
Lw中3 天前
从PDF到RAG知识库
pdf·rag·大模型应用基础·多源文档处理
winfredzhang3 天前
Python 从零打造桌面文件管理工具开发全过程实录与源码深度解析
python·pdf·视频·图片·docx·xlsx