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

亲测有效!

这是在界面显示的样子

相关推荐
阿幸软件杂货间2 天前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
reembarkation3 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation3 天前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
Light603 天前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度(一气呵成)
linux·spring boot·pdf·gpcl6/ghostpcl·s3/oss·权限与审计·异步与进度
伟贤AI之路3 天前
【分享】中小学教材课本 PDF 资源获取指南
人工智能·pdf
东风西巷3 天前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
Sunny_yiyi4 天前
Java根据模版导出PDF文件
java·开发语言·pdf
小*-^-*九4 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
千册5 天前
pyside6 的pdf显示测试 -- 01
开发语言·python·pdf
qq_172805595 天前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf