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

亲测有效!

这是在界面显示的样子

相关推荐
罗政1 小时前
PDF书籍《手写调用链监控APM系统-Java版》第8章 插件与链路的结合:Gson插件实现
java·pdf·linq
罗政3 小时前
PDF书籍《手写调用链监控APM系统-Java版》第3章 配置文件系统的建立
java·pdf·linq
罗政3 小时前
PDF书籍《手写调用链监控APM系统-Java版》第11章 插件与链路的结合:HttpClient插件实现跨进程传输TraceSegment
java·开发语言·pdf
tjjingpan4 小时前
在国产电脑上运行PDFSAM软件使用pdf分割合并交替混合处理pdf文档
linux·pdf
102112345678904 小时前
怎么把多个PDF合并到一起-免费实用PDF编辑处理工具分享
人工智能·科技·adobe·pdf·wps·格式工厂·福昕阅读器
b_qixin4 小时前
文档解析丨高效准确的PDF解析工具,赋能企业非结构化数据治理
pdf
m0_748240258 小时前
vue3 前端实现pdf打印预览 printjs
前端·pdf·状态模式
米芝芝10 小时前
vue2使用pdfjs-dist和jsPDF生成pdf文件
pdf
lory代码搬运工11 小时前
解决PDF.js部署到IIS服务器上后报错mjs,.ftl 404 (Not Found)
运维·服务器·pdf
hvinsion12 小时前
Python PDF批量加密工具
android·python·pdf