vue3+Ts 开发H5项目在线浏览pdf/word/pptx/xlsx文件方法分享

vue3+Ts 开发H5项目在线浏览pdf/word/pptx/xlsx文件方法分享;

pdf需要pdfh5这个插件才可以在线浏览,所以我们先下载插件;

pdfh5官方地址

注意 “pdfh5”: “^1.4.7” 有问题会出现插件不能完全加载出现504错误 请切换版本下载 “pdfh5”: "^1.4.2"版本

npm i pdfh5@1.4.2

其实很简单 就只用处理一下pdf类型的文件就可以了 其他文件 office 有一个自带的线上网站可以拼接上线上url直接预览

 <div v-if="pdfFlag" class="main">显示</div>
 <div v-else>
   <div class="close-preview" @click="closePreview">关闭</div>
   <div id="canvasPdf"></div>
 </div>

const pdfObj = ref<any>(null)
// 关闭预览
const closePreview = () => {
    
    
  pdfFlag.value = true;
  pdfObj.value.destroy() //卸载
}

//预览
						//文件链接地址	//文件类型后缀
const previewFile = async (url: string, format: string) => {
    
    
  if (format == 'pdf') {
    
    
    pdfFlag.value = false
    await nextTick()
    pdfObj.value = new Pdfh5("#canvasPdf", {
    
     //dom元素展示位置
      pdfurl: url, //pdf链接地址
    })
  } else {
    
    
  	//除pdf其他后缀预览方法
    window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url);
  }
}