微信小程序pdf预览

1.示例图 

2.代码

fileId:要预览的pdf文件的id 

 viewsFiles(fileId) {
    wx.showLoading({
      title: '加载中...'
    });
    var params = {
      url: "/common/getFile/" + fileId ,//后端提供的接口
      method: "GET",
      responseType: "arraybuffer",
      callBack: (res) => {
        console.log(res)
        const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
        fs.writeFile({
          // 写文件
          filePath: wx.env.USER_DATA_PATH + "/" + '文件名.pdf', // wx.env.USER_DATA_PATH 指定临时文件存入的路径,后面字符串自定义
          data: res,
          encoding: "binary", //二进制流文件必须是 binary
          success(res) {
            wx.openDocument({
              // 新开页面打开文档
              filePath: wx.env.USER_DATA_PATH + "/" + '文件名.pdf', //拿上面存入的文件路径
              showMenu: true, // 是否显示右上角菜单(3个点)
              success: function (res) {
                setTimeout(() => {
                  wx.hideLoading();
                }, 500);
              },
            });
          },
        });
      }
    }
    http.request(params)
  },

console.log(res) 打印的内容:

后端接口返回的内容样式:

### 如何在 UniApp 微信小程序中实现 PDF 文件预览 为了实现在 UniApp 中的微信小程序预览 PDF 文件的功能,可以采用 `web-view` 组件加载在线 PDF 查看器的方式。这种方式能够很好地适配不同类型的设备并提供较为流畅的用户体验。 对于直接通过 URL 访问 PDF 文件的情况,在 web-view 中可以直接指定该 URL 进行展示[^1]: ```html <template> <view> <!-- 使用 web-view 加载 pdf --> <web-view :src="pdfUrl"></web-view> </view> </template> <script> export default { data() { return { pdfUrl: 'https://example.com/path/to/your/document.pdf' // 替换成实际的PDF链接 }; } }; </script> ``` 然而当遇到经过代理服务器处理后的请求时(即URL不以`.pdf`结尾),可能会导致部分平台无法正常解析文档内容而出现白屏现象。针对这一情况,建议使用 PDF.js 来解决跨平台兼容性问题,并且还可以借此机会加入更多定制化特性比如添加水印等[^2]。 具体做法如下所示: #### 安装依赖库 首先需要引入 PDF.js 库到项目当中去。可以通过 npm 或者手动下载的形式完成安装操作。这里推荐利用 npm 方式来进行管理以便于后续维护升级工作更加便捷高效。 ```bash npm install pdfjs-dist --save ``` 接着确保已将字体资源也一并打包进来以免发生渲染异常状况: ```javascript import * as pdfjsLib from "pdfjs-dist"; // 导入worker脚本 import { Worker } from "pdfjs-dist/build/pdf.worker.entry"; pdfjsLib.GlobalWorkerOptions.workerSrc = Worker; ``` #### 编写页面逻辑 创建一个新的 Vue 页面用于呈现 PDF 文档视图。在此基础上编写相应的 JavaScript 方法来获取远程文件流数据并通过 canvas 元素绘制每一页的内容图像。 ```html <template> <scroll-view scroll-y class="container"> <canvas v-for="(page, index) in pages" :key="index" :id="'pdf-page-' + (index + 1)" style="width: 100%; height: auto;"></canvas> </scroll-view> </template> <script> import * as pdfjsLib from "pdfjs-dist"; import { getDocument } from "pdfjs-dist"; export default { onLoad(options) { this.loadPdf(options.url); }, methods: { async loadPdf(url) { const loadingTask = getDocument({ url }); const pdf = await loadingTask.promise; let totalPages = pdf.numPages; for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) { try { const page = await pdf.getPage(pageNumber); const viewport = page.getViewport({ scale: window.innerWidth / page.view[2] }); const canvasId = '#pdf-page-' + pageNumber; const query = uni.createSelectorQuery().in(this.$scope); query.select(canvasId).fields({ node: true, size: true }, res => { if (!res || !res.node) return; const canvas = res.node; const ctx = canvas.getContext('2d'); const renderContext = { canvasContext: ctx, viewport: viewport }; page.render(renderContext); }).exec(); } catch (error) { console.error(`Failed to fetch or render page ${pageNumber}`, error); } } this.pages = Array.from({ length: totalPages }, (_, i) => i + 1); } }, data() { return { pages: [] }; } } </script> <style scoped> .container { padding-top: 20rpx; } /* 添加一些样式调整 */ </style> ``` 上述代码实现了基本的 PDF 预览功能,同时也解决了由于路径格式引起的显示错误问题。如果还需要进一步增强应用的安全性和功能性,则可以在原有基础上继续扩展其他插件或服务端接口的支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值