csvpdf文件预览uniapp-H5
目录
csv、pdf文件预览uniapp-H5
文件上传均使用了uview（ ）的u-upload组件
一、csv文件预览
1.示图
点击csv文件会显示弹窗，选择文件的打开方式即可
注：移动端若限制只能上传csv文件，真机上传，其文件类型是 text/comma-separated-values ；pc端调试，其文件类型是 text/csv
2.代码
uni.downloadFile({
url: url, //文件url
success: (res) => {
const a = document.createElement('a')
a.href = res.tempFilePath
a.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 ，解压到本地
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