微信小程序打开pdf，并且需要在pdf下面放置签约按钮

最新推荐文章于 2024-09-10 16:09:26 发布

Mr_mab

最新推荐文章于 2024-09-10 16:09:26 发布

阅读量2.5k

点赞数

分类专栏：微信小程序打开pdf pdf里面放置按钮文章标签：微信小程序前端 javascript

本文链接：https://blog.csdn.net/Mr_mab/article/details/127384725

版权

微信小程序打开pdf 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

pdf里面放置按钮

1 篇文章 0 订阅

订阅专栏

之前有这样一个需求，点击租房的时候，会跳转到合同页面，然后合同下面有个签约按钮，需要实现这个需求。

一开始看到这个需求，由于后端直接返回的是二进制流，所以直接在合同页面写入二进制流，结果发现合同是能正常显示，但是按钮没法放；后面为了放置签约按钮，采用了微信的web-view 与

cover-view放按钮，然后让后端直接返回pdf地址，发现如果直接在web-view里面的src 写入pdf地址，打开为空，应该是web-view里面的src智能是html，所以单独写了个html，通过js将pdf地址写入iframe,然后将这个文件配置到服务器上面，这又出现了个问题，在安卓上面pdf显示不出来，在ios上面可以看到，后面觉得应该是html渲染的问题，于是在嵌入页面，引入了pdf.js,直接在页面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <title>Document</title>
</head>
<body>
    <!-- <embed width="100%" height="2400" src="" id="pdf1"></embed> -->
    <iframe src="" width="100%" height="2400px" id="pdf" frameborder="0"></iframe>
<script>

var searchURL = window.location.search;
			searchURL = searchURL.substring(1, searchURL.length);
            
			var targetPageId = searchURL.split("&")[0].split("=")[1];
            // document.getElementById("pdf1").src =targetPageId;

//  document.getElementById("pdf").src =targetPageId;
// windows.open("URL","name","configuration");
 window.open('./public/web/viewer.html?file='+targetPageId,"合同",'_self');
</script>
</body>
</html>

pdf，就这样花了九牛二虎之力完美解决了这个问题,以此来记录这个历程

<template>
    <view class="page-wrap">
			<web-view :src="docUrl" >
				<cover-view class="button-cover" @click="signEvent">
                    签约 
                </cover-view>
			</web-view>
    </view>
</template>