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

亲测有效!

这是在界面显示的样子

相关推荐
XLYcmy6 小时前
pdf论文处理:CSV输出模式
数据库·python·pycharm·pdf·论文·csv·dify
SamChan901 天前
用Python+Requests批量翻译PDF:从脚本到调度
后端·python·microsoft·ai·pdf·机器翻译
SamChan902 天前
PDF翻译API的JWT签名鉴权与速率限制设计:安全实战指南
网络·安全·pdf
AmyLin_20012 天前
PDF 脱敏技术【1】:PDF 脱敏不是盖黑框:为什么敏感信息仍能被复制,正确的保护方式是什么?
安全·pdf·sdk·脱敏·文档安全·pdf 脱敏·智能脱敏
denggun123452 天前
PDF解析 Mineru
pdf
10mAh2 天前
【PaddleOCR】扫描版 PDF 无法复制、RAG 检索为空怎么解决?——OCR 解析与版面还原实战
前端·pdf·ocr
慧都小妮子3 天前
PDF图片提取总“褪色“?Aspose.PDF 多层级提取能力详解
pdf·c#·.net·图片处理·文档处理·色彩空间
SamChan903 天前
PDF翻译中的并发控制:用Semaphore防止API限流与资源耗尽
java·jvm·pdf
ilvcn4 天前
在线 PDF 翻译工具实测:整份翻译保留表格版式,长文档处理方案
pdf
accept 99%4 天前
python版提取 PDF 的常用第三方库与工具
开发语言·python·pdf