微信小程序在线预览PDF格式文件

当初开发这个功能时,网上一堆说苹果和安卓平台不一样,代码不一样,亲测一套代码安卓和苹果都可以打开预览,完全没问题,安卓也没有提示下载,改改传参直接用

wxml
<web-view src="{{reportUrl}}" wx:if="{{reportShow}}"></web-view>
<view wx:else></view>

js
const app = getApp()
Page({
  data: {
    reportUrl: null,
    reportShow: false
  },
  onLoad: function (options) {
    wx.showLoading({
      title: '报告加载中',
    })
    var that = this
    var params = options.params;
    var id = options.pgxTestBasicId;
    that.setData({
      reportUrl: params + '?pgxTestBasicId=' + id
    })
    that.setData({
      reportShow: false
    })
    wx.downloadFile({
      url: that.data.reportUrl,
      header: {
        "sessionKey": app.globalData.sessionKey
      },
      success: function (res) {
        var Path = res.tempFilePath
        wx.openDocument({
          filePath: Path,
          fileType: "pdf",
          success: function (res) {
            wx.hideLoading()
          }
        })
        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },
  onHide:function(){
    wx.navigateBack({
      delta: 1
    })
  }
})

 

### 实现 UniApp 微信小程序PDF 文件预览 在 UniApp 开发的微信小程序环境中,直接集成 `PDF.js` 库来实现在应用内浏览 PDF 文档的功能并非最简便的方式。通常情况下,对于微信小程序而言,更推荐利用内置 API 来处理文件下载与打开操作[^1]。 然而,如果确实有需求通过 `PDF.js` 进行自定义渲染,则需要注意以下几点: #### 准备工作 首先需确认所使用的 `PDF.js` 版本兼容于微信小程序环境,并且考虑到小程序对 Web Worker 的支持有限制,可能需要调整默认配置以适应此平台特性。 #### 加载 PDF.js 资源 由于微信小程序不完全遵循标准浏览器行为模式,因此加载外部 JavaScript 和 CSS 可能会遇到权限问题。建议将必要的 `PDF.js` 文件(如 pdf.worker.min.js)放置到项目的 static 或 assets 目录下并本地引入。 ```html <script type="module"> import { createWorker } from '@/static/pdfjs/build/pdf'; </script> ``` #### 初始化 PDF.js 工作线程 创建一个新的 worker 对象用于执行后台任务而不阻塞主线程。注意这里要指定正确的路径指向之前提到的工作脚本位置。 ```javascript let loadingTask; const url = 'your-pdf-url'; // 替换成实际的PDF链接 // 创建worker实例 async function initPdfJs() { const workerSrc = '/static/pdfjs/build/pdf.worker.min.js'; await importScripts(workerSrc); } initPdfJs(); ``` #### 渲染页面内容 获取文档对象后可以调用相应接口读取每一页的内容并绘制至 canvas 上显示给用户查看。 ```javascript loadingTask = pdf.createLoadingTask(url); loadingTask.promise.then(pdf => { console.log('Total pages: ' + pdf.numPages); renderPage(1); // 默认从第一页开始 }).catch(reason => { console.error(reason); }); function renderPage(num) { loadingTask.promise.then(pdf => { pdf.getPage(num).then(page => { let scale = 1.5; let viewport = page.getViewport({scale}); // Prepare canvas using PDF page dimensions. let canvas = document.getElementById('the-canvas'); let context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context. let renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); }) } ``` 以上代码片段展示了如何基于 `PDF.js` 在 UniApp 构建的小程序里解析和呈现 PDF 页面。不过值得注意的是这种方法增加了项目复杂度以及潜在性能开销,除非特别必要一般还是优先考虑官方提供的简易方案即使用 `uni.downloadFile()` 结合 `uni.openDocument()` 完成相同目标。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值