vue 预览有token验证的 doc、docx、pdf、xlsx、csv、图片并下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 预览有token验证的 doc、docx、pdf、xlsx、csv、图片并下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

预览 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 标签,请从列表中下载预览</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();
        // 重新创建新表格
        window.luckysheet.create({
          container: 'mysheet', // 设定DOM容器的id
          showtoolbar: false, // 是否显示工具栏
          showinfobar: false, // 是否显示顶部信息栏
          showstatisticBar: false, // 是否显示底部计数栏
          sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
          allowEdit: false, // 是否允许前台编辑
          enableAddRow: false, // 是否允许增加行
          enableAddCol: false, // 是否允许增加列
          sheetFormulaBar: false, // 是否显示公式栏
          enableAddBackTop: false, //返回头部按钮
          data: exportJson.sheets, //表格内容
          title: exportJson.info.name //表格标题
        });
      });

下载文章来源地址https://www.toymoban.com/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')