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

亲测有效!

这是在界面显示的样子

相关推荐
麻花地7 小时前
MinerU 文档解析全指南:从 magic-pdf 到 3.4.5,PDF→Markdown 开源利器深度实战
pdf·开源
2601_967760788 小时前
PDF 转图片再转回总翻车?2026 国内免费实测
pdf
zhlx28358 小时前
小初高教材 PDF 批量获取|中小学电子课本下载器,支持批量下载带书签 PDF 教材[Windows]
pdf
张某布响丸辣8 小时前
Node 16 下用 pdfjs + @napi-rs/canvas 把中文 PDF 渲染成图片
pdf·node·字体映射
weixin_4935036717 小时前
Vue3 前端生成 PDF:会员证书与活动签到表的三种打印方案与踩坑记录
前端·pdf·状态模式
、如果21 小时前
PDF图片文字提取零依赖方案:pymupdf+AI视觉实战
人工智能·数据分析·pdf·图片提取·文字提取·skills
SamChan901 天前
PDF翻译后的格式完整性校验:用Python自动比对译文与原文档的表格与段落结构
开发语言·python·ai·pdf·机器翻译
web打印社区1 天前
浏览器静默打印?先别装第三个库了
前端·vue.js·chrome·electron·pdf
慧都小妮子1 天前
DevExpress Java 文档处理 API 免费 CTP:PDF、PowerPoint、条码与跨平台部署
java·pdf·powerpoint·devexpress·文档处理·条码生成
SamChan901 天前
大文件多语言PDF翻译性能实测:300页文档的耗时、内存占用与失败率分析
python·ai·pdf·机器翻译