H5移动端预览PDF方法

最新推荐文章于 2025-11-08 08:23:47 发布

原创

最新推荐文章于 2025-11-08 08:23:47 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #pdf

新建页面

新建一个页面以便去预览对应的pdf

新建完后在 pages.json 文件内去新增对应路由

页面内容

<template>
	<view class="page">
		<view class="pdf">
			<view id="demo"></view>
		</view>
		<view class="backPage" @click="goBack">
			<uni-icons type="back" size="30"></uni-icons>
		</view>
	</view>
</template>

<script>
import Pdfh5 from "pdfh5"
import "pdfh5/css/pdfh5.css";
export default {
	data() {
		return {
			src: '',
			pdfh5: null
		}
	},
	onLoad(option) {
		this.src = option.url
		this.getDataInfo(option.url)
		uni.setNavigationBarTitle({title: '报告详情',});
	},
	methods:{
		getDataInfo(url){
			this.$nextTick(()=&g