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

亲测有效!

这是在界面显示的样子

相关推荐
:mnong4 小时前
附图报价系统设计分析5
electron·pdf·vue·cad·dwg·定额
tanis_207715 小时前
DeepSeek-TUI 也能读 PDF 了:Skill + MinerU CLI 终端文档解析实战
人工智能·后端·深度学习·pdf·csdn开发云
w2018002 天前
一至六年级下册数学第五单元测试卷(人教版+苏教版)
pdf
w2018002 天前
人教版小学一至六年级下册语文期中考试试卷PDF可打印
pdf
w2018002 天前
小学一至六年级下册数学期中考试试卷PDF(人教版+苏教版+冀教版+北师版)
pdf
yivifu2 天前
使用PyMuPDF基于对PDF文档内容的分析自动识别并删除PDF文件中的水印
python·pdf·pymupdf·去水印
tanis_20772 天前
PDF 解析后输出什么格式?MinerU 五类下游场景的选型指南
人工智能·pdf·csdn开发云
tanis_20772 天前
扫描版中文 PDF 怎么提取文字:用 MinerU 做 OCR + 结构化一体处理
人工智能·pdf·ocr
tanis_20772 天前
MinerU2.5-Pro 中文 PDF 识别准确率全解:OmniDocBench v1.6 权威基准数据
人工智能·python·pdf
小林敲代码77882 天前
基于 PDFBox 的 PDF 水印管理:使用 OCG 层实现精准添加与一键去除
pdf