@TOCuniapp+vue3微信小程序pdf文件过大,预览性能差的解决方案
方案
1、结合后台,将pdf文件进行拆分并转换成图片,通过调用接口,获取图片(这些图片是流下载的方式)
2、前端使用image组件循环将图片平铺,并结合image组件的懒加载使用
3、结合uniapp中的movable-area,movable-view组件,实现pdf文件的放大、缩小、拖动的功能
4、利用css实现水印效果
后台操作忽略,只记录前端部分
图片平铺,放大、缩小、拖动代码如下
<movable-area :scale-area="true" class="movable_area">
<movable-view class="movable_view"
:x="x" :y="y"
direction="all"
:scale="true"
:scale-min="1"
:scale-max="3"
:scale-value="scale"
>
<scroll-view class="file_box" scroll-y="true">
<view class="files">
<image class="file_image" v-for="(item,index) in fileImage" :key="index" :src="item.url" :lazy-load="true" mode="aspectFill"></image>
</view>
</scroll-view>
</movable-view>
</movable-area>
组件相关属性,参考官网
水印实现:
<view style="position: fixed;top: -10vh; left:-100vw;width: 250vw; height: 100vh; z-index: -999;transform: rotate(-45deg);">
<block v-for="(item,index) in 30" wx:key="index" v-if="userinfo">
<view style="color:gray; margin:30rpx; padding:20rpx; opacity: 0.15;">
{{userinfo.name + ' '}} {{userinfo.name + ' '}} {{userinfo.name + ' '}} {{userinfo.name + ' '}} {{userinfo.name + ' '}} {{userinfo.name + ' '}} {{userinfo.name + ' '}}
</view>
</block>
</view>
…
…
…
END
pdf文件过大,小程序预览性能差的问题,完美解决!