2.18 微信小程序pdf文件预览下载

 wx.saveFile下载后的文件不好找,在文件管理中下载的路径不清晰,需要进一步研究

文件保存成功,本地路径: wxfile://store_cb07513f44cf07e5f95c0aa0dc5ac436db75be82f5008acd045d479b398154d2.xlsx

使用wx.openDocument打开文件后,右上角三个点点击保存到手机

微信:文件已保存到 /sdcard/Download/WeiXin/tmp_dawhduadwadjaidzxncijdwa.xlsx

wx.downloadFile({
  url: 'https://example.com/audio/123', //仅为示例,并非真实的资源
  success (res) {
    // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
    wx.openDocument({
      filePath: res.tempFilePath,
      showMenu: true,
      fileType: 'pdf',
      success: function (res) {
        console.log('打开文档成功')
      },
    fail: function (res) {
      getApp().showToast("预览失败")
    }
  })
  }
})


wx.downloadFile({
  url: 'https://example.com/sample.pdf', // PDF 文件的 URL
  success: function (res) {
    // 下载成功后将文件保存到本地
    wx.saveFile({
      tempFilePath: res.tempFilePath, // 下载的文件临时路径
      success: function (res) {
        // 文件保存成功后,可以通过 res.savedFilePath 获取本地路径
        console.log('文件保存成功,本地路径:', res.savedFilePath);
      },
      fail: function (res) {
        console.log('文件保存失败:', res);
      }
    });
  },
  fail: function (res) {
    console.log('文件下载失败:', res);
  }
});

2、el-checkbox 如果赋值undefined,会有异常,显示上一次勾选或不勾选的值

在前端实现预览PDF文件流,通常会利用浏览器内置的支持,比如HTML5的`<object>`元素或者JavaScript库如PDF.js。以下是基本步骤: 1. **使用<object>元素**: - 创建一个`<object>`标签,并设置其type属性为`application/pdf`。 - 将PDF文件的URL作为data属性值。 ```html <object data="path_to_your_pdf.pdf" type="application/pdf"> 您的浏览器不支持PDF查看,请下载PDF文件。 </object> ``` 2. **使用PDF.js (推荐)**: - 如果需要更好的兼容性交互体验,可以引入PDF.js库,它允许在浏览器上渲染PDF内容。 - 首先,在HTML中引用PDF.js库,然后创建一个`canvas`元素用于展示PDF内容。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfjs-dist/2.18.473/pdf.js"></script> <canvas id="pdf-canvas"></canvas> ``` - JavaScript部分加载PDF预览: ```javascript async function previewPdf(url) { const pdfUrl = url; await PDFJS.getDocument(pdfUrl).promise.then(function(pdfDoc) { let page = pdfDoc.getPage(1); // 获取第一页 const scale = 1; // 缩放比例 const viewport = page.getViewport({ scale }); const canvas = document.getElementById('pdf-canvas'); const context = canvas.getContext('2d'); canvas.width = viewport.width; canvas.height = viewport.height; // 渲染PDF到canvas page.render({ canvasContext: context, viewport: viewport }); }); } previewPdf("path_to_your_pdf.pdf"); ``` 3. **处理跨域**: - 如果PDF文件来自不同的域名,可能会遇到跨域问题。这时需要服务器提供CORS头或使用其他方式解决。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值