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

亲测有效!

这是在界面显示的样子

相关推荐
hu556679815 小时前
Adobe Acrobat DC PDF如何批量文本替换
adobe·pdf
Datawhale1 天前
《Hello-Agents》完整PDF首发,智能体教程免费下载!
pdf
hnxaoli1 天前
win10程序(十四)pdf转docx简易版
开发语言·python·pdf
CodeCraft Studio1 天前
PDF处理控件Aspose.PDF教程:在Python中向PDF文档添加页面
开发语言·python·pdf
开开心心就好1 天前
电子报纸离线保存:一键下载多报PDF工具
网络·笔记·macos·pdf·word·音视频·phpstorm
裴嘉靖1 天前
Vue 生成 PDF 完整教程
前端·vue.js·pdf
书中自有妍如玉2 天前
Node.Js 实现模板生成Word、Word转Pdf文件、Excel生成、上传和下载
pdf·node.js·word
啃火龙果的兔子2 天前
前端导出大量数据到PDF方案
前端·pdf
我只会写Bug啊2 天前
Vue文件预览终极方案:PNG/EXCEL/PDF/DOCX/OFD等10+格式一键渲染,开源即用!
前端·vue.js·pdf·excel·预览
帧栈3 天前
SpringBoot + iTextPDF + Acrobat 构建动态PDF表单的完整实践
spring boot·后端·pdf