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

亲测有效!

这是在界面显示的样子

相关推荐
yivifu12 小时前
使用PyMuPdf删除PDF文档中的水印
pdf·pymupdf·去水印
ComPDFKit14 小时前
ComPDF的产品升级:从工具包到PDF服务
pdf
占疏16 小时前
pdf文件解析
pdf
开开心心_Every18 小时前
音频视频转文字工具,离线语音识别免费
人工智能·游戏·微信·pdf·excel·语音识别·memcache
开开心心_Every19 小时前
电脑网速加速工具,无线有线叠加网络
网络·游戏·微信·pdf·电脑·excel·语音识别
小沈同学呀19 小时前
SpringBoot 使用Docx4j实现 DOCX 转 PDF
spring boot·后端·pdf·docx4j
开开心心就好19 小时前
免费批量抠图软件大模型,复杂倒影精准去除
网络·windows·pdf·计算机外设·电脑·硬件架构·材料工程
MaiTube&Maipdf2 天前
麦瓜PDF 的安全分享流程图:从上传到权限控制
pdf·流程图
CodeCaptain2 天前
【一】dify的知识库上传过相关的文件作为待引用的文档,这样已经与[原始语料 → 按“一文档一份 PDF”存 ObjectStore]同样的概念吗
人工智能·pdf·dify
放飞自我的Coder2 天前
【PDF拆分 Python拆分左右并排PDF】
python·pdf