首页 > 其他分享 >移动端预览PDF,pdf.js预览PDF文件流格式

移动端预览PDF,pdf.js预览PDF文件流格式

时间:2023-06-07 23:45:08浏览次数:44  
标签:预览 js host pdf PDF pdfjs

 

一开始使用了vue-pdf效果并不理想,满足不了要求还出现兼容问题,

PDF.js似乎是一个完美的解决方案,号称兼容各种浏览器.快速且高效.界面按钮可以配置,而且也比原生iframe框架好看一些,但是一轮的使用下来,确确实实躺了不少的坑,特此记录一下全过程,希望以后使用的时候注意一点.

以下是我使用过程中碰到的问题:

1.跨域问题

2.本地开发无法预览问题

3.获取PDF文件流的请求头问题。

 

下载pdf.js官网地址:https://mozilla.github.io/pdf.js/

下载后解压。

 

下面是完整的使用过程:

1.把pdf.js放在项目根目录的public文件目录下,注意:要是没有这个文件可以放在static里效果都一样

2.添加iframe标签

<iframe :src="pdfUrl" frameborder="0" class="pdf-window"></iframe>

3.js部分:

getUrl() {

  const host = window.location.host;

  const url = `${window.location.protocol}//${host}/ + 接口地址`; //  (可拼接参数)

  this.pdfUrl = `${window.location.protocol}//${host}/nts-pt/pdfjs/web/viewer.html?file=${encodeURLComponent(url)}`; // 当前环境下调起pdfjs控件

}

说白了上面代码 url 就是后端接口地址(返回pdf文件流)

可以通过`${window.location.protocol}//${host}/nts-pt/pdfjs/web/viewer.html直接在浏览器打开查看是否正常显示默认pdf

如果本地可以连接测试环境地址那就最好了,可以直接测试预览效果

如果无法连接测试环境,可以在本地试下pdf.js是否正常使用,测试方法如下:

把 this.pdfUrl = 'http//localhost:8080/pdfjs/web/viewer.html'

这种方法是可以直接打开本地默认pdf的(compressed.tracemonkey-pldi-09.pdf)。能打开说明pdf正常使用,

 

4.注意:必须要了解清楚接口是否需要传token值

如果需要,配置的地方是在pdfjs里面build的pdf.js里找到createPDFNetworkStream

大概在1960行左右,

把里面的httpHeaders添加你需要的参数就可以了。

 

标签:预览,js,host,pdf,PDF,pdfjs
From: https://www.cnblogs.com/zxm1993/p/17464907.html

相关文章

  • 使用THREEJS实现一个可调节档位、可摇头的电风扇
    夏天到了,用Three.js实现一个可以摇头和调节档位的电风扇。主要使用到Blender处理3D模型,用Vite+Typescript搭建项目框架。效果演示:一、处理模型1、从爱(bai)给(gei)网下载一个风扇的3D模型,在Blender中打开,给模型贴上图。2、拆解模型。将风扇模型拆解成按钮、底座、扇叶、头部......
  • JS 模拟 队列 结构
    Code:/***队列(基于动态数组)*@class*/varAQueue=(function(){/***栈容器*@type{DArray}*/letarr;/***@class*/class_AQueue{/***构造器*@constructor*@param{number}[capacity]*/con......
  • JS 中 使用 Uuid
    一、官方网站https://github.com/uuidjs/uuid二、安装uuidnpminstalluuid三、导入uuid注:官方文档里的示例只适用于服务端(nodejs),想在浏览器里使用,得换一种导入方法nodejs:import{v4asuuidv4}from'uuid';浏览器js:constuuidv4=require('uuid').v4;四、使用c......
  • Three.js系列-报错export ‘Geometry‘ (imported as ‘THREE‘) was not found in ‘
    今天遇到报错export'Geometry'(importedas'THREE')wasnotfoundin'three'port'Geometry'(importedas'THREE')wasnotfoundin'three'(possibleexports:ACESFilmicToneMapping,AddEquation,AddOpe......
  • TsVSJs之间的区别
    一、观察1.JS平常的数据类型letval;val=123;val="123";val=true;val=[1,3,5];注意点:由于JS是弱类型的,所以只要定义了一个变量,就可以往这个变量中存储任意类型的数据也正是因为如此,所以会给我们带来一个问题2.假设a是一个数组,b是一个数值functiontest......
  • 13_How to Deploy NodeJs app on Ubuntu in Production
     地址:https://www.codewithharry.com/blogpost/deploy-nodejs-app-on-ubuntu/ HowtodeployaNode.jsapplicationinproductionInthispost,wewillseehowtorunanddeployNodeJSappsinproduction.Followthestepsbelow:Step1-InstallNodejsLet�......
  • 什么是json
    a='{"pwd":"12345678","type":1}'#判断是不是一个json,可以在网上找json工具进行判断#b不是jsonb="{'pwd':'12345678','type':1}"#json表示数据为空是null,不是Nonec='{"mobile_phone":null,"pw......
  • 格式化显示JSON数据
     测试JSON{"took":1,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{"value":2,"relation":"eq......
  • window安装EMQX和node.js
    进入网站https://www.emqx.io/zh/downloads?os=Windows进入nodejs官网https://nodejs.cn/download/下载......
  • vue 预览word文档、图片、pdf文件等
    <el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handlePreviewFile(obj)">预览</el-button><el-dialogtitle="预览":visible.sync="......