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

亲测有效!

这是在界面显示的样子

相关推荐
就叫飞六吧14 小时前
pdf转国产ofd格式代码案例-Java
java·python·pdf
步里软件15 小时前
2424.自动将截图组合成PPT的软件:一款截图合并工具的开发与实践
pdf·截图·截图合并工具·区域截图软件·截图转pdf工具·批量截图管理·长图拼接工具
TextIn智能文档云平台15 小时前
如何使用大模型处理图片和PDF并抽取信息?
pdf
winfredzhang16 小时前
用 Python 手搓一个 PDF 编辑器:wxPython 与 PyMuPDF 实战详解
python·pdf·合并·缩略图·书签
季春二九16 小时前
PDF24 Creator丨多功能PDF编辑丨转换丨压缩丨文本识别
pdf·pdf24 creator
ZeroNews内网穿透1 天前
公网访问开源 Stirling-PDF 工具,提升办公效率
linux·运维·服务器·网络·pdf·ssh
千天夜1 天前
Python合并多个PDF文件:完整指南与实践
windows·python·算法·pdf
Redundantº2 天前
Uniapp 适配安卓与 iOS 的 PDF、DOC 文件上传
android·ios·pdf·uni-app·webview
旺旺的碎冰冰~2 天前
Adobe如何给PDF添加页码
adobe·pdf
YANshangqian2 天前
PDF工具箱 PDF24
pdf