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

亲测有效!

这是在界面显示的样子

相关推荐
海带紫菜菠萝汤3 小时前
免费在线翻译器横评:2026年6款PDF翻译工具对比
人工智能·python·pdf
SunnyDays10113 小时前
C# 加密和解密 PDF:设置密码、AES 加密及操作权限
pdf·c#·加密 pdf·解除 pdf 密码·pdf 权限设置·pdf 文档安全
SamChan905 小时前
WebSocket实现PDF翻译进度实时推送:Go后端+React前端的完整方案
前端·websocket·pdf·c#·react·机器翻译
森叶1 天前
拆解 PDF 翻译引擎:表格纹丝不动、长语言自动缩放、图片文字 AI 重绘背后的工程
人工智能·pdf
AI创界者1 天前
MinerU v3.4.4 离线部署实战:PDF/PPT/图片一键转 Markdown,低至 4G 显存/纯 CPU 可用
pdf·powerpoint
cosinmz1 天前
图片转PDF:手机合同照片如何整理成规范PDF文件
pdf·pdf转换·图片转pdf·图片转pdf小程序
a1117761 天前
深入理解 AI Agent PDF(设计原理与工程实践 )
pdf
CCC65A8780D2C1 天前
PaddleOCR-VL-1.6图片PDF文档解析识别成文本工具,解压就能用,完全本地离线
pdf
桐桐桐1 天前
技术文档翻译实践:保留PDF表格与版式的几种方案
pdf·自动化
王莎莎-MinerU1 天前
别让 Agent 重读 PDF:文档解析要交付可缓存资产
网络·数据库·人工智能·驱动开发·缓存·pdf·ocr