H5实现附件预览功能(doc、docx、pdf)

一、(钉钉小程序官方目前没有预览附件的API,也可用这种方法实现)
doc/docx、xls/xlsx、ppt/pptx可直接用以下链接打开:
注意:使用此方法,附件链接必须是域名。

https://axsf-test.oss-cn-beijing.aliyuncs.com/axsf_file/wwwwwwwwww91440300326557087X.pdf
//两种方式
window.open(url);  //新建窗口打开链接预览
window.location.href = url;  //本页面内跳转链接实现预览

二、微信小程序预览附件用wx.downLoadFile和wx.openDocument,即可实现:
//需要用到两个api:wx.downLoadFile和wx.openDocument,先将附件转换成本地连接,再用

openDocument打开
wx.downloadFile({
  // 示例 url,并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

pdf类型附件可以参考我的另外一个文档
https://blog.csdn.net/m0_52611940/article/details/132736273?spm=1001.2014.3001.5502

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现在线预览PDFDOCX格式的文件,可以使用第三方库或插件。以下是使用jQuery和第三方插件的示例: 1. 使用PDF.js库实现PDF文件的在线预览: ```html <!-- 引入PDF.js脚本 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script> <!-- 定义一个canvas元素,用于显示PDF内容 --> <canvas id="pdf-canvas"></canvas> <script> // 加载PDF文件 PDFJS.getDocument('path/to/pdf/file.pdf').then(function(pdf) { // 获取第一页 pdf.getPage(1).then(function(page) { // 获取canvas元素 var canvas = document.getElementById('pdf-canvas'); // 设置canvas的宽度和高度 var viewport = page.getViewport({scale: 1}); canvas.height = viewport.height; canvas.width = viewport.width; // 渲染PDF内容到canvas上 page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport }); }); }); </script> ``` 2. 使用Viewer.js插件实现PDFDOCX文件的在线预览: ```html <!-- 引入Viewer.js样式文件和脚本文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.9.1/viewer.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.9.1/viewer.min.js"></script> <!-- 定义一个容器元素,用于显示PDFDOCX内容 --> <div id="viewer"></div> <script> // 初始化Viewer.js插件 var viewer = new Viewer(document.getElementById('viewer'), { toolbar: { // 显示放大、缩小和旋转按钮 zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true } }); // 在Viewer中加载PDFDOCX文件 viewer.load('path/to/pdf_or_docx/file.pdf'); </script> ``` 以上是两种常用的实现在线预览PDFDOCX格式文件的方法,具体选择哪种方法,可以根据自己的需求和实际情况来选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值