前端 word，excel，txt，csv文件在线预览，本地预览或新页面预览处理

79 0 0

1. 打开新页面预览：

https://view.officeapps.live.com/op/view.aspx?src= word，excel处理预览

    // 接口返回文件地址 res.data
    let urlOpen = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(res.data)
    // 创建一个a标签来解析URL
    let parser = document.createElement('a')
    parser.href = urlOpen
   // 得到的地址有时候可能是  http://localhost:8080/XXXXhttps://view.officeapps.live.com/xxxxxxx
    console.log(parser.href, '跳转的地址为parser.href')
    // 找到"https://view.officeapps.live.com"的索引
    let startIndex = parser.href.indexOf('https://view.officeapps.live.com')
    let finalUrl = ''
    // 找到后删除没用的前缀
    if (startIndex !== -1) {
      // 删除指定前缀  http://localhost:8080/XXXX
      finalUrl = parser.href.substring(startIndex)
      console.log(finalUrl, '输出删除前缀后的字符串')
      // 最终跳转地址 新页签跳转
      window.open(finalUrl)
    }

2. 本页面预览：可加弹窗预览

https://view.officeapps.live.com/op/view.aspx?src= word，excel处理预览

// html使用iframe打开
<iframe  :src="state.urlOpen" width="100%"  height="500" frameborder="0"></iframe>

// data定义
const state = reactive({
  urlOpen: '', 
})

 // 接口返回地址处理      文件地址 res.data
 let urlOpen = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(res.data)
 state.urlOpen = urlOpen

3. 本页面预览：可加弹窗预览

http://view.xdocin.com/xdoc?_xdoc= csv，txt处理预览

// html使用iframe打开
<iframe  :src="state.urlOpen" width="100%"  height="500" frameborder="0"></iframe>

// data定义
const state = reactive({
  urlOpen: '', 
})

// 接口返回地址处理    文件地址 res.data
let urlOpen =  'http://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent(res.data) 
state.urlOpen = urlOpen