uniapp+vue3微信小程序pdf文件过大，预览性能差的解决方案

@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文件过大，小程序预览性能差的问题,完美解决！