uniapp微信小程序pdf预览，且可以添加自定义水印（兼容安卓和ios）

微信小程序pdf预览，且可以添加自定义水印（兼容安卓和ios）

uniapp微信小程序pdf预览

一、使用webview方式，访问pdf文件地址

<web-view  :src="showFilePath">
</web-view>
// showFilePath 是pdf文件访问路径

但是这样有个问题，如果这个访问地址是使用了代理，不是直接访问pdf文件的路径（以pdf结尾的路径），在小程序上安卓真机上会显示白屏，IOS可以显示。那么这个方式就不太可行

使用pdfjs实现预览pdf文件，支持自定义水印

我遇到的问题是：pdf文件在浏览器上访问是有水印的，但是通过pdfjs转成的预览，会直接忽略掉文档中的水印层，导致原本pdf文件有的水印，使用pdfjs渲染的内容没有水印，于是我就自己添加水印仅用于查看。以下是实现的代码：

<template>
    <div class="pdf-container">
        <div class="image-container">
            <img v-for="(image, index) in pageImages" 
                 :key="index" 
                 :src="image" 
                 :alt="`Page ${index + 1}`"
                 class="pdf-page-image">
        </div>
    </div>
</template>

<script setup>
import {
    onMounted, ref } from 'vue';
import pdfFile from './aa.pdf'
import {
    useRoute } from 'vue-router';

const route = useRoute();
const pageImages = ref([]);
const pdfUrl = ref('');
const watermarkText = ref('');
let pdfDoc = null