uniapp在线预览pdf

准备

先下载pdf.js然后和node_modules同级新建一个hybrid文件目录，把下载好的pdf.js解压进去，（微信收藏里有）

 开始

然后在pages下新建一个FilePreview页面，用来呈现预览的pdf

在FilePreview.vue页面中：

在请求后端文件流的组件，或者页面中，得转成Blob文件类型，我这里的查看文件，是在UpLoader组件里面写的

 

注意：

在接口请求的时候在请求前加{responseType: arraybuffer}要不然请求出来会看不到东西

request.js封装：

import storage from './storage'
import config from '@/common/config.js'
import {
	Notify
} from 'vant'
const BASE_URL = config.api()
export const request = (url, method, params, responseType) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + url, // 地址
			method: method || 'post', // 请求方式
			responseType: responseType ? responseType : '',
			header: {
				Authorization: storage.getItemSync('token') ? storage.getItemSync('token') : ''
			}, // token
			data: params || {}, // 参数
			success: (res) => {
				if (res.statusCode === 401) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				} else if (res.statusCode === 500) {
					Notify('操作错误', '1500', 'error')
					return
				}
				// 成功将data抛出
				resolve(res.data)
			},
			// ... 这里还可以做一些请求完成之后的提示
			fail: (err) => {
				Notify('系统错误', '1500', 'error')
				return reject(err)
			}
		})
	})
}

在定义接口的时候

import {
	request
} from '@/common/request.js'

export default {
	// 预览
	preview: (id) => request(`/portal/system/file/v1/preview?fileId=${id}`, 'get', '', 'arraybuffer')
}