csv、pdf文件预览uniapp-H5

h_65432102025-09-28 20:38

文件上传均使用了uview（ https://uviewui.com/components/upload.html）的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 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

csv、pdf文件预览uniapp-H5

一、csv文件预览

1.示图

2.代码

二、pdf预览

**1.**示图

2.使用方式

1.示图