uniapp H5 展示pdf

摸鱼的小前端

已于 2024-08-16 18:20:26 修改

阅读量788

点赞数 5

CC 4.0 BY-SA版权

文章标签： javascript html js vue

于 2024-08-16 18:00:03 首次发布

本文链接：https://blog.csdn.net/weixin_50449022/article/details/141265354

uniapp H5 展示pdf

简介：uniapp H5展示pdf，为什么单独写个这呢？因为不想让pdf展示的时候出现预览的边框。

显示效果：在这里插入图片描述

1、首先安装pdf.js
npm install pdfh5

2、然后安装一个canvas，不装他老是报错
npm install canvas --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas

3、然后上代码

<template>
	<view class="content">
		<view class="pdf">
			<view id="demo"></view>
		</view>
	</view>
</template>
<script>
import Pdfh5 from "pdfh5"
import "pdfh5/css/pdfh5.css";
export default {
	data() {
		return {
			src: '',
			pdfh5: null
		}
	},
	onLoad() {
		this.getDataInfo()
	},
	methods:{
		getDataInfo(){
			//这里是请求成功
			this.pdfh5 = new Pdfh5('#demo', {
				pdfurl: res.url //换成你自己的pdf路径
			});
		}
	}
}