ui-app 使用PSPDFKit 显示pdf和获取当前阅读页数

最新推荐文章于 2024-03-15 09:39:49 发布

哆啦A梦爱吃鱼

最新推荐文章于 2024-03-15 09:39:49 发布

阅读量582

点赞数

文章标签： ui pdf javascript

本文链接：https://blog.csdn.net/shanshanbao/article/details/128117187

版权

插件网站：https://pspdfkit.com/api/web/PSPDFKit.Configuration.html#renderPageCallback
1.代码 pdf.vue

<!-- pdf预览 -->
<template>
	<view class="">
		 <view style="height:10vh;"> 
			<view>button1</view>
			<view>button2</view>
			//顶部区域用来显示额外操作列
		 </view> 
		<iframe id="pdfView" v-show="showIframe" :src="iframeUrl" frameborder="0"
			style="width:100%;height:90vh"></iframe>
	</view>
</template>

<script setup>
	import PSPDFKitContainer from './PSPDFKitContainer'
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	let store = useStore();


	import httpRequestClass from '@/public/httpRequest.js'
	const p_imgUrl = httpRequestClass.url;

	// data()
	const pdfFile = "/static/pdfjs-2.15.349-dist/web/bbb.pdf"
	const iframeUrl = ref('')
	const showIframe = ref(false)

	
	onLoad(function(options) {
		window.onmessage = function(event) {
			console.log(event.data.info) // 接收传过来的当前阅读页数
			store.commit('trainDetail/set_fileList_byCompletePercentage', event.data.info || 0);
		}

		p_isSave.value = options.isSave == "false" ? false : true;
		
		iframeUrl.value ='static/pdfView.html' + '?pdfURL='
	
		let pdfURL = '/static/pdfjs-2.15.349-dist/web/bbb.pdf';
		
		// 获取pdf文件位置 pdfURL 之后

		iframeUrl.value += encodeURIComponent(pdfURL)
		showIframe.value = true

	})

	onMounted(function() {
	})

	
</script>

<style lang="scss" scoped>

</style>

2.pdfView.html 显示pdf的页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Provide proper viewport information so that the layout works on mobile devices. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>PDF Viewer in jQuery</title>
    <!-- <link rel="stylesheet" href="css/style.css" /> -->
	<style>
		body{
			overflow:hidden;
		}
		</style>
</head>

<body>
	
    <!-- Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; height: 100vh"></div>

   <!-- Google jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="./jquery.3.5.1.js"></script>

    <script src="./pspdfkit.js"></script>

    <script>
		
		
        PSPDFKit.load({
                container: '#pspdfkit',
				  disableWebAssemblyStreaming: true,
                document: decodeURIComponent(getQueryVariable('pdfURL')),
            })
            .then(function(instance) {
                console.log('PSPDFKit loaded', instance);
				instance.addEventListener("viewState.change", (viewState) => {
					console.log(viewState,'viewState')
				  // console.log(instance.viewState.currentPageIndex + 1,'获取当前页数');
				  // console.log('总页数',instance.totalPageCount)
				  //iframe 传参 把当前阅读页数传过去
				  window.parent.postMessage({info: instance.viewState.currentPageIndex + 1}, "*");
				});
			
		
            })
            .catch(function(error) {
                console.error(error.message);
            });
        // console.log(window.location)

        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
		
        console.log(getQueryVariable('pdfURL'))
    </script>
</body>

</html>