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

亲测有效!

这是在界面显示的样子

相关推荐
开开心心就好11 小时前
无需安装的单机塔防游戏轻松畅玩
人工智能·游戏·pdf·音视频·智能家居·语音识别·媒体
枫叶丹413 小时前
【HarmonyOS 6.0】ArkWeb PDF预览回调功能详解:让PDF加载状态可控可感
开发语言·华为·pdf·harmonyos
优化控制仿真模型14 小时前
【26年6月最新】英语六级2015-2025年12月历年真题及答案PDF
经验分享·pdf
开开心心_Every16 小时前
动图制作工具,拆分转视频动态照离线免费
运维·前端·人工智能·edge·pdf·散列表·启发式算法
枫叶丹417 小时前
【HarmonyOS 6.0】ArkWeb PDF浏览能力增强:指定PDF文档背景色功能详解
开发语言·华为·pdf·harmonyos
开开心心_Every2 天前
安卓图片压缩工具,无损缩放尺寸免费好用
人工智能·pdf·计算机外设·ocr·语音识别·团队开发·规格说明书
无心水2 天前
14、企业级表格|AWS Textract 扫描件表格自动结构化
架构·pdf·云计算·aws·pdf解析·pdf抽取·aws textract
无心水2 天前
13、云端OCR终极指南|百度/阿里/腾讯API高精度文字提取实战
百度·架构·pdf·ocr·dubbo·pdf解析·pdf抽取
优化控制仿真模型2 天前
2026年初中英语大纲词汇表1600词
经验分享·pdf
优化控制仿真模型3 天前
方正小标宋简体、仿宋GB2312和楷体_GB2312办公字体安装包下载安装教程
经验分享·pdf