uniapp实现pdf预览

先看效果

下载pdf.js插件

github下载

注意： 需要使用魔法★★★

http://mozilla.github.io/pdf.js/getting_started/

网盘下载

通过网盘分享的文件：pdfjs-4.7.76-dist.zip
链接: https://pan.baidu.com/s/1hgS0x8joy3ft-x72_U17Ig?pwd=jhfg 提取码: jhfg

下载后解压得到如下文件：

复制插件到项目

项目**static目录！！！！！！**下新建pdf文件夹，目录结构如下，将解压的文件夹复制到该目录下

创建pdf预览页面

右击pages文件夹，新建页面

pages.json配置路由

    {
        "path" : "pages/showPdf/index",
        "style" : 
        {
            "navigationBarTitleText" : "图纸预览"
        }
    }

使用

这里传过去的links就等于你调后端接口获取文件流的api地址

handlePreview(url) {
    let	PDFSrc = 'http://' + location.host + '/api' + url;
    let links = encodeURIComponent(PDFSrc)
    console.log('links--->',links);
    // links举例： "http://localhost:8896/api/admin/sys-file/oss/file?fileName=d78e0e27639c42e8847939740a1fd4bb.pdf"
    uni.navigateTo({
        url: '/pages/showPdf/index?links=' + links
    })
},

解决真机webview遮挡手机状态栏的问题

在onload函数中前面写上下面的代码即可

onLoad(option) {
	let height = 0; //定义动态的高度变量
	let statusbar = 0; // 动态状态栏高度
	uni.getSystemInfo({ // 获取当前设备的具体信息
		success: (sysinfo) => {
			statusbar = sysinfo.statusBarHeight;
			height = sysinfo.windowHeight;
		}
	});
	let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
	setTimeout(function() {
		var wv = currentWebview.children()[0];
		wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
			top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
			height: height, //webview的高度
		})
	}, 200); //如页面初始化调用需要写延迟
}