加載腳本

  // word
  await this.utils.loadScript('https://unpkg.com/promise-polyfill/dist/polyfill.min.js')
  await this.utils.loadScript('https://unpkg.com/jszip/dist/jszip.min.js')
  await this.utils.loadScript('https://unpkg.com/docx-preview@0.1.9/dist/docx-preview.min.js')

  // excel
  await this.utils.loadScript('https://unpkg.com/xlsx/dist/xlsx.full.min.js')

  // pdf
  await this.utils.loadScript('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.9.179/pdf.min.js')

WORD

// 元素
<div id="viewModalContainer"></div>

// 方法
  const data = await fetch(url)
    .then((response) => response.blob())
    .then((res) => {
      this.$('dialog_lkw0jna2').show()
      docx.renderAsync(res, document.getElementById('viewModalContainer'), null, {
        // ignoreWidth: true,
        // ignoreHeight: true,
      }).then(result => {
        console.log('result', result)
      })
    })
  return data

excel

// 元素
<div id="excelContainer"></div>

// 方法
  const data = await fetch(url)
    .then((response) => response.arrayBuffer())
    .then((res) => {
      this.$('dialog_lkwbvqrc').show()
      const wb = XLSX.read(res);
      console.log('wb', wb)
      // const ws = wb.Sheets[wb.SheetNames[0]];
      // console.log('ws', ws)
      // const html = XLSX.utils.sheet_to_html(ws)
      let html = '';

      wb.SheetNames.forEach(function (name, index) {
        let ws = wb.Sheets[name];
        let str = XLSX.utils.sheet_to_html(ws, { header: 1, defval: '' });
        // 只截取table的內(nèi)容
        let startNo = str.indexOf(`<table>`);
        let endNo = str.indexOf(`</table>`);
        str = str.substring(startNo, endNo + `</table>`.length);

        str = str.replace(/(\b(?:id|t|v)=".*?")/g, '');
        str = str.replace('<table>', `<table border="1" style="border-collapse:collapse; width: 100%; border:1px solid #666666; margin-bottom:5px;font-size:14px;margin: 15px 0;">`);

        html += str;
      })

      const dom = document.getElementById('excelContainer')
      dom.innerHTML = html
    })

pdf

// 有個(gè)canvas元素
<canvas id="pdfContainer"></canvas>

// 方法
  const loadingTask = pdfjsLib.getDocument(url)
  loadingTask.promise.then(res => {
    this.$('dialog_lkwbvqrg').show()
    // 獲取 canvas 元素
    const canvas = document.getElementById('pdfContainer')

    res.getPage(1).then(function (page) {
      const viewport = page.getViewport({ scale: 1 });
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      page.render({
        canvasContext: context,
        viewport: viewport
      });
    }).catch(error => {
      console.log('error:', error)
    })
  })

img

• 根據(jù)使用的組件庫(kù)直接預(yù)覽

this.utils.previewImage({ current: rowData.path })

video

• 新窗口打開

window.open(rowData.path)

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-633504.html

到了這里，關(guān)于前端根據(jù)url在線預(yù)覽功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！