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容器的idshowtoolbar: 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 //表格标题});});

下载

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')