uni-app钉钉小程序pdf预览

我们在web端pdf预览一般都是直接打开或者是使用插件来打开，当下最流行用的pdf插件就是pdf.js，但是在小程序中是无法直接打开pdf链接的，这时候就会想，那能不能使用pdf.js插件来打开呢？实际上是可以实现的，不过需要结合web-view来使用（web-view是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面）。下面就来具体说说是如何实现的。

1、到pdf.js官网（官网）下载插件放到你的项目里面，下载稳定版。需要注意的是在钉钉小程序开发者工具中点击预览会报错，报错的原因是说不支持文件名包含@的图片，所以只要把下载的pdf.js文件夹中web/images里的带@的图片全部删除就可以了。（我的pdf，链接：https://pan.baidu.com/s/1LQ8_NnS07btgQy-mqO2EzA 
提取码：3r3h ）

2、使用，直接上代码

<template>
	<view><web-view :src="pdfUrl"></web-view></view>
</template>

<script>
export default {
	data() {
		return {
			// 下载的psf.js插件中的viewer.html路径
			viewerUrl: '/static/pdf/web/viewer.html',
			pdfUrl: ''
		};
	},
	methods: {
		init() {
			let url = '后端接口返回的pdf地址';
			// encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
			let fileUrl = encodeURIComponent(url);

			// 注意：一定要记住加上后端接口地址（接口地址是在小程序的白名单里的），
			// 否者在小程序中打开pdf会显示页面访问受限
			this.pdfUrl = '后端接口地址' + this.viewerUrl + '?file=' + fileUrl;
		}
	}
};
</script>

<style scoped lang="less"></style>

没有加后端接口结果：

加后端接口最终结果：

好了，今天的分享就到这里，see you。。。