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

亲测有效!

这是在界面显示的样子

相关推荐
xinixini2 小时前
小初高全学科课程标准PDF
pdf
SQVIoMPLe4 小时前
python-langchain框架(3-7-提取pdf中的图片 )
python·langchain·pdf
Highcharts.js5 小时前
Highcharts客户端导出使用文档说明|图表导出模块讲解
前端·javascript·pdf·highcharts·图表导出
CHANG_THE_WORLD8 小时前
PDF结构的清晰图示
java·服务器·pdf
怀君8 小时前
Uniapp——View布局生成图片转PDF
pdf·uni-app
其实秋天的枫8 小时前
2026年初中中考英语大纲词汇表1600个电子版PDF(含单词音频和默写本)
经验分享·pdf
weixin_441003648 小时前
2027众合法硕一本通电子版pdf
pdf·众合法硕一本通
优化控制仿真模型8 小时前
考研计算机408统考历年真题及答案解析PDF电子版(2009-2026年)
经验分享·pdf
じ☆ve 緈辐8 小时前
ELSEVIER(爱思唯尔)投稿PDF中生成中文错误和计算稿件words的数量。
pdf
CHANG_THE_WORLD8 小时前
PDF解析器代码详解:从文件结构到交叉引用表解析
网络·pdf