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

亲测有效!

这是在界面显示的样子

相关推荐
witton11 小时前
记一次pdf转Word的技术经历
pdf·乱码·word·pymupdf·mupdf·mupdf.js·winansiencoding
马武寨山的猴子1 天前
【MinerU】:一款将PDF转化为机器可读格式的工具——RAG加强(Docker版本)
人工智能·docker·容器·pdf·rag
萧鼎1 天前
PDFMathTranslate:让数学公式在PDF翻译中不再痛苦
python·pdf
会功夫的李白1 天前
PDF嵌入隐藏的文字
java·pdf·itext
陌殇殇2 天前
Java使用IText7动态生成带审批文本框的PDF文档
java·pdf
Ven%2 天前
VsCode如何使用默认程序打开word Excel pdf等文件
ide·vscode·pdf·编辑器
软件工程小施同学2 天前
计算机学报 2024年 区块链论文 录用汇总 附pdf下载
pdf·区块链
Sherlock Ma3 天前
PDFMathTranslate:基于LLM的PDF文档翻译及双语对照的工具【使用教程】
人工智能·pytorch·语言模型·pdf·大模型·机器翻译·deepseek
kadog3 天前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
小墨宝3 天前
js 生成pdf 并上传文件
前端·javascript·pdf