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

亲测有效!

这是在界面显示的样子

相关推荐
拾荒的小海螺4 小时前
C#:PdfiumViewer 高效解析和操作 PDF 的技术指南
开发语言·pdf·c#
YJlio7 小时前
PsPing 学习笔记(14.7):一条龙网络体检脚本——连通性、延迟、带宽全都要
开发语言·网络·笔记·python·学习·pdf·php
YJlio8 小时前
PsPing 学习笔记(14.8):常见错误与排障实战(超时、拒绝连接、权限问题)
开发语言·笔记·python·学习·django·pdf·pygame
浮尘202510 小时前
PC端pdf软件测评
pdf·软件评测
SEO-狼术10 小时前
PDF Content Through the Viewer
pdf
SEO-狼术11 小时前
Convert Word Documents to PDF
pdf·word
七分辣度11 小时前
Python给PDF添加水印(极速版)
python·pdf
"YOUDIG"12 小时前
PDF高效处理全解析:压缩、拆分、合并的原理与实践——一站式在线工具指南
pdf
weixin_4624462312 小时前
Python 使用 pypdf 按指定页码范围批量拆分 PDF(分章节)
python·pdf·pdf分割
全能打工人12 小时前
ruoyi项目导出PDF
java·elementui·pdf