uni-app 预览PDF禁止下载打印等功能 单纯预览

在uni-app中，预览PDF文件并禁止下载和打印功能，通常涉及到使用第三方PDF预览组件或库，并对其进行一定的自定义配置。由于HTML5和JavaScript本身对于PDF文件的控制相对有限，特别是禁止下载和打印这类高级功能，一般需要通过集成特定的PDF查看器库，并结合一些前端技巧来实现。

以下是一个使用pdf.js库来预览PDF，并通过一些前端技巧来尽量阻止下载和打印的示例代码。请注意，这些方法并非绝对有效，因为用户仍然可以通过浏览器的开发者工具或其他手段绕过这些限制。

1. 安装pdf.js

首先，你需要在你的uni-app项目中引入pdf.js库。你可以通过npm安装，但考虑到uni-app的特殊性，你可能需要手动下载并将其放入static目录。

# 如果你在HBuilderX中开发，可以手动下载pdf.js及其相关文件，并放置在项目的static目录下

1. 创建PDF预览页面

创建一个新的页面用于PDF预览，例如preview.vue。

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

<script>
import pdfjsLib from '@/static/pdf.min.js'; // 根据实际路径调整

export default {
  data() {
    return {
      pdfUrl: '' // PDF文件的URL
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const pdf = await pdfjsLib.getDocument(this.pdfUrl).promise;
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1.5 });

      const canvas = uni.createCanvasContext('pdfCanvas');
      const context = canvas.getContext('2d');
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };

      page.render(renderContext);
      canvas.draw();
    }
  }
};
</script>

<style scoped>
/* 添加样式以防止用户复制内容等 */
body, html {
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}
</style>

1. 禁用右键菜单和键盘快捷键

在上面的代码中，通过CSS禁用了用户选择文本，但还可以通过JavaScript监听事件来禁用右键菜单和打印等键盘快捷键。

mounted() {
  document.addEventListener('contextmenu', this.preventRightClick);
  document.addEventListener('keydown', this.preventPrint);
  this.loadPdf();
},
beforeDestroy() {
  document.removeEventListener('contextmenu', this.preventRightClick);
  document.removeEventListener('keydown', this.preventPrint);
},
methods: {
  preventRightClick(e) {
    e.preventDefault();
  },
  preventPrint(e) {
    if (e.key === 'p' && (e.ctrlKey || e.metaKey)) {
      e.preventDefault();
    }
  },
  // ... 其他方法
}

这种方法可以在一定程度上阻止用户下载和打印PDF，但并不能完全防止技术熟练的用户绕过这些限制。对于更高级的安全需求，你可能需要考虑服务器端渲染或专门的PDF查看服务。