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

亲测有效!

这是在界面显示的样子

相关推荐
CHANG_THE_WORLD11 小时前
PDFium导出pdf 图像
开发语言·c++·pdf
momo_al11 小时前
Umi-OCR制作双层PDF
pdf·ocr
励志成为美貌才华为一体的女子11 小时前
pdf解析工具---Miner-u 本地部署记录
学习·pdf
reasonsummer11 小时前
【办公类-115-02】20251018信息员每周通讯上传之文字稿整理(PDF转docx没有成功)
python·pdf
top_designer14 小时前
告别“静态”VI手册:InDesign与AE打造可交互的动态品牌规范
设计模式·pdf·交互·vi·工作流·after effects·indesign
2501_929382651 天前
MobiOffice解锁高级功能版 v15.9.57971 安卓手机doc, docx ppt, .pptx pdf办公软件
智能手机·pdf·powerpoint·wps
CodeCraft Studio2 天前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
E_ICEBLUE2 天前
高效压缩 PDF 文件大小(3 大实用的 Python 库)
python·pdf
技术钱2 天前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
xingxing_F2 天前
PDF Protector for mac PDF文档加密解密工具
macos·pdf