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

亲测有效!

这是在界面显示的样子

相关推荐
冬夜戏雪9 小时前
基于rapidocr 的文档解析(pdf转md)工具(已部署)
pdf·运维开发
vfvfb11 小时前
批量获取pdf中姓名电话 自动获取pdf中指定的文字
pdf·pdf提取文字·pdf提取指定字符·提取pdf内容
new出一个对象1 天前
vue实现打印PDF文档
javascript·vue.js·pdf
花菜会噎住1 天前
Chainlit+LlamaIndex 多模态 RAG 开发实战7:从系统架构到功能落地,搞定 PDF/PPT/ 图片全类型文件处理
pdf·大模型·rag·llamaindex
sunshinehine1 天前
vue2实现pdf预览兼容低版本浏览器
pdf
weixin_441003642 天前
2025年6月英语四六级真题及参考答案【三套全】完整版PDF电子版
pdf
南风微微吹2 天前
26考研数学一、二、三真题试卷及答案PDF电子版(1987-2025年)
考研·pdf
一头生产的驴2 天前
java整合itext pdf实现固定模版pdf导出
java·python·pdf
魔都吴所谓2 天前
【python】快速实现pdf批量去除指定位置水印
java·python·pdf