csv、pdf文件预览uniapp-H5

文件上传均使用了uview（https://uviewui.com/components/upload.html）的u-upload组件

一、csv文件预览

1.示图

点击csv文件会显示弹窗，选择文件的打开方式即可

2.代码

uni.downloadFile({url: url, //文件urlsuccess: (res) => {const a = document.createElement('a')a.href = res.tempFilePatha.download = fileName //文件名称document.body.appendChild(a)a.click()document.body.removeChild(a)}
})

打印出来的url格式：blob:https://192.168.7.202:9090/f3d7b09f-87c0-4062-ba31-272618b9a8ad

二、pdf预览

1.示图

pdf使用内部预览的方式

2.使用方式

1.在官网下载pdf.js https://mozilla.github.io/pdf.js/getting_started/#download，解压到本地

2.新建一个pdfWebview文件

<template><view style="width: 100%;height: 100vh;"><web-view :src="pdfUrl"></web-view></view>
</template><script>export default {data() {return {pdfUrl: '',viewerUrl: '/static/hybrid/html/web/viewer.html',}},onLoad(options) {//从A页面点击跳转传递pdf文件路径过来let fileUrl = encodeURIComponent(options.pdfUrl) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。this.pdfUrl = this.viewerUrl + '?file=' + fileUrl}}
</script>

3.点击文件，跳转pdfWebview预览文件

uni.navigateTo({url: '/components/pdfWebview/pdfWebview?pdfUrl=' + url  //pdf文件的url
})

打印出来的url格式：blob:https://192.168.7.202:9090/38d9ca6a-b207-414e-91b6-844e94ef62c4