Vue3+Ts development H5 project online browsing pdf/word/pptx/xlsx file method sharing

Vue3+Ts development H5 project online browsing pdf/word/pptx/xlsx file method sharing;

pdf needs the pdfh5 plug-in to browse online, so we download the plug-in first;

pdfh5 official address

Note "pdfh5": "^1.4.7" If there is a problem, the plug-in cannot be fully loaded and a 504 error occurs Please switch the version and download the "pdfh5": "^1.4.2" version

npm i pdfh5@1.4.2

In fact, it is very simple, you only need to process pdf files. Other files office has a built-in online website that can be spliced ​​​​on the online url and previewed directly.

 <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);
  }
}