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

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

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

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

复制代码

但是这样有个题目，如果这个访问地点是使用了署理，不是直接访问pdf文件的路径（以pdf末端的路径），在小程序上安卓真机上会显示白屏，IOS可以显示。那么这个方式就不太可行
使用pdfjs实现预览pdf文件，支持自定义水印

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

1. <template>
2.     <div class="pdf-container">
3.         <div class="image-container">
4.             <img v-for="(image, index) in pageImages"
5.                  :key="index"
6.                  :src="image"
7.                  :alt="`Page ${index + 1}`"
8.                  class="pdf-page-image">
9.         </div>
10.     </div>
11. </template>
13. <script setup>
14. import { onMounted, ref } from 'vue';
15. import pdfFile from './aa.pdf'
16. import { useRoute } from 'vue-router';
18. const route = useRoute();
19. const pageImages = ref([]);
20. const pdfUrl = ref('');
21. const watermarkText = ref('');
22. let pdfDoc = null;
24. const waitForPdfJs = () => {
25.     return new Promise((resolve) => {
26.         const checkPdfJs = () => {
27.             if (window.pdfjsLib) {
28.                 resolve();
29.             } else {
30.                 setTimeout(checkPdfJs, 100);
31.             }
32.         };
33.         checkPdfJs();
34.     });
35. };
37. const convertPageToImage = async (pageNum) => {
38.     const page = await pdfDoc.getPage(pageNum);
39.     const viewport = page.getViewport({ scale: 2 });
40.    
41.     const canvas = document.createElement('canvas');
42.     const context = canvas.getContext('2d');
43.    
44.     canvas.height = viewport.height;
45.     canvas.width = viewport.width;
46.    
47.     await page.render({
48.         canvasContext: context,
49.         viewport: viewport
50.     }).promise;
51.    
52.     if (watermarkText.value) {
53.         context.save();
54.         
55.         context.globalAlpha = 0.2;
56.         context.font = '36px Arial';
57.         context.fillStyle = '#888';
58.         
59.         const text = watermarkText.value;
60.         const textWidth = context.measureText(text).width;
61.         const spacing = 130;
62.         const verticalSpacing = 100;
63.         
64.         for (let y = 50; y < canvas.height; y += verticalSpacing) {
65.             for (let x = -30; x < canvas.width; x += spacing + textWidth) {
66.                 context.save();
67.                 context.translate(x, y);
68.                 context.rotate(-0.3);
69.                 context.fillText(text, 0, 0);
70.                 context.restore();
71.             }
72.         }
73.         
74.         context.restore();
75.     }
76.    
77.     return canvas.toDataURL('image/jpeg', 0.8);
78. };
80. const renderAllPages = async () => {
81.     const promises = [];
82.     for (let i = 1; i <= pdfDoc.numPages; i++) {
83.         promises.push(convertPageToImage(i));
84.     }
85.     pageImages.value = await Promise.all(promises);
86. };
88. onMounted(async () => {
89.     const encodedUrl = route.query.url || '';
90.     watermarkText.value = route.query.text ? decodeURIComponent(route.query.text) : ''; // 自定义水印的文字
91.    
92.     pdfUrl.value = encodedUrl ? decodeURIComponent(encodedUrl) : pdfFile; // pdfFile这个是本地pdf文件用来调试
93.     await waitForPdfJs();
94.    
95.     const loadingTask = pdfjsLib.getDocument(pdfUrl.value);
96.     loadingTask.promise.then(function (pdf) {
97.         pdfDoc = pdf;
98.         renderAllPages();
99.     });
100. });
101. </script>
103. <style scoped>
104. .pdf-container {
105.     display: flex;
106.     flex-direction: column;
107.     align-items: center;
108.     width: 100%;
109.     max-width: 1200px;
110.     margin: 0 auto;
111. }
113. .image-container {
114.     width: 100%;
115.     overflow-y: auto;
116.     background: #f5f5f5;
117.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
118. }
120. .pdf-page-image {
121.     display: block;
122.     margin: 0 auto 20px;
123.     width: 100%;
124.     max-width: 800px;
125.     height: auto;
126.     background: white;
127. }
128. </style>

复制代码

注意:
这里标注一下pdfjsLib这个对象是这两个文件里面有的，会把pdfjsLib放在window里面的

下面是效果哦！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。