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

亲测有效!

这是在界面显示的样子

相关推荐
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
东华果汁哥21 小时前
【URL 转换为PDF】HTML转换为PDF
前端·pdf·html
诸葛大钢铁1 天前
Excel转PDF的三种方法
笔记·职场和发展·pdf·excel
爱分享的飘哥2 天前
第二十一 篇 PDF文档自动化:Python一键合并、分割、水印、提取与加密解密!你的PDF全能管家!
python·pdf·python操作pdf·pdf 加解密·pdf 分割和合并
簪花走马过长安3 天前
【PDF识别改名】使用京东云OCR完成PDF图片识别改名,根据PDF图片内容批量改名详细步骤和解决方案
ui·pdf·ocr·excel·京东云·wps·图片区域识别重命名
ComPDFKit3 天前
为什么有些PDF无法复制文字?原理分析与解决方案
人工智能·pdf·ocr
开开心心就好3 天前
电脑桌面整理工具,一键自动分类
运维·服务器·前端·智能手机·pdf·bash·symfony
咖啡色格调3 天前
Java使用itextpdf7生成pdf文档
java·pdf·maven
开开心心_Every3 天前
可增添功能的鼠标右键优化工具
开发语言·pdf·c#·计算机外设·电脑·音视频·symfony
余大侠在劈柴4 天前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf