uniapp实现在线pdf预览以及下载
在线预览
遇到的问题
后端返回一个url地址，我需要将在在页面中渲染出来。因为在浏览器栏上我输入url地址就可以直接预览pdf文件，因此直接的想法是通过web-view组件直接渲染。有什么问题呢？在h5端能够正常渲染出pdf文件，但是在app端却直接弹出是否下载的弹窗。
如何解决？
利用pdfjs这个库结合html页面以及url将pdf的实际地址传给html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#btn {
width: 100%;
height: 35px;
background-color: #10aeff;
color: #fff;
line-height: 35px;
text-align: center;
}
</style>
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="module" src="/static/pdfjs-4.2.67-legacy-dist/build/pdf.js"></script>
<script type="module" src="/static/pdfjs-4.2.67-legacy-dist/build/pdf.worker.js"></script>
<title></title>
</head>
<body>
<canvas id="the-canvas" style="width:100%; height: 80vh"></canvas>
<button id="btn">下载</button>
<script type="module">
var url = '替换为真实地址';
var { pdfjsLib } = globalThis;
pdfjsLib.GlobalWorkerOptions.workerSrc = '/static/pdfjs-4.2.67-legacy-dist/build/pdf.worker.js';
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport({scale: scale});
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
</script>
</body>
</html>
PS:这个
html页面是存在服务器的
编写好以上html界面之后,在uniapp端我们使用web-view组件来渲染该html页面
<web-view :src="src" />
使用web-view所存在的问题
-
web-view组件的层级高于一切组件，会对其他组件进行覆盖(使用定位也无法解决)-
cover-view组件会可以解决组件的覆盖问题，但是却无法进行事件处理 -
/* 使用一下无法触发点击事件，但是能够将文字呈现与web-view的上方 */ <view> <web-view :src="src"></web-view> <cover-view> <cover-view @click="handleDownload">下载</cover-view> </cover-view> </view>
-
如何触发下载
通过以上分析，我们知道了在uniapp端已经无法实现下载功能了。那么，真的没有办法了吗？有的，兄弟，有的。通过查看官方文档，我们可以知道web-view组件提供了一个事件@message用来接收html页面发来的消息，那么，我们是不是可以将下载按钮放在html页面端，通过点击事件通知app端呢？事实证明该方案完全可行。那么页面端怎么向app端发起通信呢？需要结合uni.webview.js这个库，这个库的作用是什么——他可以让我们在非vue环境下使用uni对象。那么我们可以结合这个库使用uni的postMessage方法向app发起下载的指令。在app点接收这个指令
const btn = document.getElementById('btn');
document.addEventListener('UniAppJSBridgeReady', () => {
btn.addEventListener('click', () => {
uni.postMessage({
data: {
action: 'download'
}
});
})
});
<script>
export default {
methods: {
handleMessage(event) {
const { action } = event.detail.data[0]
if (action && action === 'download') {
this.handleDownload()
}
}
}
}
</script>
实现下载
<script>
export default {
methods: {
handleDownload() {
uni.showLoading({
title: '下载中'
})
plus.downloader
.createDownload(
this.pdfUrl,
{
filename: `file://storage/emulated/0/Download/${new Date().getTime()}.pdf`
},
(d, status) => {
if (status == 200) {
uni.hideLoading()
uni.showToast({
title: '下载成功',
icon: 'none'
})
setTimeout(() => {
const fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename)
plus.runtime.openFile(fileSaveUrl)
}, 500)
} else {
uni.showToast({
title: '下载失败',
icon: 'error'
})
}
}
)
.start()
}
}
}
}
</script>
