pdf.js出现bug：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239“

控制台出现提示：

从接口拿到的文件流：

1.响应头：

2.请求头：

原因：
接收到文件流后，格式不对导致pdf.js无法浏览。

解决方案：
收到文件流后，使用响应的数据创建一个 blob，然后使用该 blob 创建一个 url。

 const blob = new Blob([data], {type: 'application/pdf'})// data为文件流数据let url = window.URL.createObjectURL(blob)

我的代码案例：

src/utils/request.js

import axios from 'axios'
import { getToken } from '@/utils/auth'
import { Notification, MessageBox, Message, Loading } from 'element-ui'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL:window.prod_config.BASE_URL,// 超时timeout: 10000
})// request拦截器
service.interceptors.request.use(config => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === 'get' && config.params) {let url = config.url + '?' + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}return config
}, error => {console.log(error)Promise.reject(error)
})
let isReFreshPadding=true
// 响应拦截器
service.interceptors.response.use(res => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode['default']// 二进制数据则直接返回if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){return res.data}if (code !== 200) {Notification.error({title: msg})return Promise.reject('error')} else {return res.data}},error => {console.log('err' + error)let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";}Message({message: message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)

// 获取文件流
export function downStream(url,params) {return service.get(url, {responseType: 'blob'}).then(res => {return res}).catch((r) => {console.error(r)})
}export default service

src/api/user/userApi.js

import { downStream } from '@/utils/request'
// 预览文件
export function previewFile(id) {return downStream('/order/printUser/printFile/preview/' + id)
}

user.vue

<script>import {previewFile
} from '@/api/user/userApi'

    // 预览pdf文件pdfDlg(fileId){previewFile(fileId).then((response) => {const blob = new Blob([response], {type: 'application/pdf'})this.src = window.URL.createObjectURL(blob)this.pdfDialogVisible = true}).catch(err => {console.log('err:', err)})},

pdf.js出现bug：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239“相关推荐

使用 pdf.js 查看发票时，显示不了台头和印章的解决办法
系统中使用了 pdf.js 来查看 PDF 文件,发现在查看电子发票时, 缺失了很多信息, 刚开始以为是 PDF.JS 的 BUG, 后来调试发现只需要在 IIS 里添加一个 bcmap 后缀的 m ...
rosweb,roslib:bug汇总。报Warning: Invalid argument “/map“ passed to canTransform
1.bug1 rosweb加载地图到画布中,双击地图控制台报: Warning: Invalid argument "/map" passed to canTransform ar ...
pdf.js 实现阅读pdf文件
pdf.js跨域读取文件pdf文件 1.pdf.js获取文件的方法 You can modify the defaultUrl app option in the web/app_options.js ...
手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
钉钉应用开发，提示Warning: Invalid CERT Authority
我司的网页应用与钉钉进行了单点登录的对接,结果在钉钉App中打开提示SSL error,顶上的提示是Warning: invalid CERT Authority. 点击Yes可以正常访问,只是每次提 ...
vue使用pdf.js实现移动端在线PDF文件预览
背景产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力方案 H5展示合同PDF,有很多实现方式.但是通过尝试后发现在不同操作系 ...
web3.js使用bug汇总及解决方法
web3.js使用过程中各类bug汇总:More than one instance of bitcore-lib found;BigNumber Error;gasLimit无法解析而报错;js合约 ...
pdf.js 库的使用
这里写自定义目录标题 1. pdf.js 库的使用 1.1. 什么是 pdf.js 1.2. 在网页上显示 pdf 文件(使用 pdf.js) 1.2.1. 下载 1.2.2. 网页上显示 pdf 文 ...

pdf.js出现bug：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239“

pdf.js出现bug：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239“相关推荐

最新文章

热门文章