uni-app全端实现base64格式文件预览 包括PDF Word 图片等

在uni-app中实现全端（包括H5、小程序、App等）对base64格式文件的预览，可以通过以下步骤实现。由于不同平台对文件预览的支持不同，这里提供一个通用的解决方案，利用uni.previewImage、PDF.js（用于PDF预览）和自定义的HTML解析（用于Word预览）。

1. 图片预览

对于图片预览，uni-app提供了原生的uni.previewImage方法，可以直接使用base64数据。

// 假设 base64Data 是图片的 base64 编码
const base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...';

uni.previewImage({
  current: base64Data, // 当前显示图片的http链接
  urls: [base64Data] // 需要预览的图片http链接列表
});

2. PDF预览

对于PDF文件，可以使用PDF.js库来解析和预览。首先，下载并引入PDF.js库。

<!-- 在你的项目中引入 PDF.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js"></script>

然后，使用以下代码进行PDF预览：

<template>
  <view>
    <canvas canvas-id="pdfCanvas" style="width: 100%; height: 100vh;"></canvas>
  </view>
</template>

<script>
export default {
  mounted() {
    const base64Data = 'data:application/pdf;base64,JVBERi0xLjMKJdDU...';
    const pdfArray = atob(base64Data.split(',')[1]);
    const pdfBlob = new Blob([pdfArray], { type: 'application/pdf' });

    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.worker.min.js';

    const loadingTask = pdfjsLib.getDocument(pdfBlob);
    loadingTask.promise.then(pdf => {
      pdf.getPage(1).then(page => {
        const scale = 1.5;
        const viewport = page.getViewport({ scale });

        const canvas = document.getElementById('pdfCanvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  }
}
</script>

3. Word文档预览

对于Word文档，可以通过将base64数据转换为Blob，然后利用HTML的<iframe>或<object>标签进行预览。但这种方法对格式的支持有限，可能需要用户下载文件查看完整内容。

<iframe :src="wordBlobUrl" width="100%" height="100vh"></iframe>

const base64Data = 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBBQABgAIAAAAIQ...';
const wordBlob = dataURItoBlob(base64Data);
const wordBlobUrl = URL.createObjectURL(wordBlob);

function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
}

以上代码示例展示了如何在uni-app中实现全端对base64格式文件的预览，包括图片、PDF和Word文档。