預(yù)覽 doc我也不會

//docx
<div v-if="previewType == 'docx'"  ref="iframeDom" style="border: none; width: 100%; height: 100%"></div>
import { renderAsync } from "docx-preview";
let iframeDom: any = ref();
axios({
      url: docURL,
      method: "get",
      timeout: 100000,
      responseType: "blob",
      headers: {
        token: "xxxxx",
      },
    })
      .then(({ data }) => {
        previewType.value = "docx";
        console.log("iframeDom", iframeDom.value);
        renderAsync(data, iframeDom.value);
      })
      .catch((error) => {
        console.log(error);
      });
  }

//pdf || 圖片
 <iframe :src="src" style="border: none; width: 100%; height: 100%" v-if="previewType == 'pdf'">
          <p>您的瀏覽器不支持 iframe 標(biāo)簽,請從列表中下載預(yù)覽</p>
 </iframe>
  previewType.value = "pdf";
    src.value =  docURL
previewType.value = "img";
    src.value =  docURL
        
//xlsx 、csv
import LuckyExcel from 'luckyexcel'
 <div v-if="previewType == 'xlsx'" id="mysheet" style="margin:0px;padding:0px;width:100%;height:85vh;"></div>
previewType.value = "xlsx";
    LuckyExcel.transformExcelToLuckyByUrl(docURL,
      "", (exportJson: any, luckysheetfile: any) => {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          alert("文件讀取失敗!");
          return;
        }
        // 銷毀原來的表格
        window.luckysheet.destroy();
        // 重新創(chuàng)建新表格
        window.luckysheet.create({
          container: 'mysheet', // 設(shè)定DOM容器的id
          showtoolbar: false, // 是否顯示工具欄
          showinfobar: false, // 是否顯示頂部信息欄
          showstatisticBar: false, // 是否顯示底部計數(shù)欄
          sheetBottomConfig: false, // sheet頁下方的添加行按鈕和回到頂部按鈕配置
          allowEdit: false, // 是否允許前臺編輯
          enableAddRow: false, // 是否允許增加行
          enableAddCol: false, // 是否允許增加列
          sheetFormulaBar: false, // 是否顯示公式欄
          enableAddBackTop: false, //返回頭部按鈕
          data: exportJson.sheets, //表格內(nèi)容
          title: exportJson.info.name //表格標(biāo)題
        });
      });

下載文章來源地址http://www.zghlxwxcb.cn/news/detail-700534.html

pdf
axios({
      url: downURL,
      method: "get",
      timeout: 100000,
      responseType: "blob",
      headers: {
        token: "xxxx",
      },
    }).then(({ data }) => {

      const aLink = document.createElement("a");
      const objectUrl = window.URL.createObjectURL(new Blob([data], { type: "application/pdf" }));
      document.body.appendChild(aLink);
      aLink.style.display = "none";
      aLink.href = objectUrl;
      aLink.download = infoData.value.fileName;
      aLink.click();
      document.body.removeChild(aLink);
      return
    });

圖片
var image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function () {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      var context: any = canvas.getContext("2d");
      context.drawImage(image, 0, 0, image.width, image.height);
      var url = canvas.toDataURL("image/png");

      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = down.value.split('.')[0] || "photo";
      a.href = url;
      a.dispatchEvent(event);
    };
    image.src = downURL;  // 指定圖片的來源，這是需要我們提供的
    return

其他文檔
window.open(downURL, '_blank')

到了這里，關(guān)于vue 預(yù)覽 有token驗證的 doc、docx、pdf、xlsx、csv、圖片 并下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！