vue 页面实现 本地预览 pdf png docx txt excel pptx等文件预览 |
您所在的位置：网站首页 › 文件预览窗口 › vue 页面实现 本地预览 pdf png docx txt excel pptx等文件预览 |
|
pdfbollean: false, pngbollean: false, txtbollean: false, docxbollean: false, xlsxbollean: false, pptxbollean: false, excelView:“”, tableau:“”, txtPre:“”, url2: “http://localhost:8081/wendang/aaa.pdf”, url3: “http://localhost:8081/wendang/aa.pptx”, url: “http://localhost:8081/wendang/aa.png”, handlepreview(row) { this.dialogVisible = true if (row.extendName == “pdf”) { this.pdfbollean = true; this.pngbollean = false; this.txtbollean = false; this.docxbollean = false; this.xlsxbollean = false; this.pptxbollean = false; this.url2 = ‘http://localhost:8081’ + row.filePath; } if (row.extendName == “png”) { this.pdfbollean = false; this.pngbollean = true; this.txtbollean = false; this.docxbollean = false; this.xlsxbollean = false; this.pptxbollean = false; this.url = ‘http://localhost:8081’ + row.filePath; } if (row.extendName == “txt”) { this.pdfbollean = false; this.pngbollean = false; this.txtbollean = true; this.docxbollean = false; this.xlsxbollean = false; this.pptxbollean = false; //txt let xhr = new XMLHttpRequest(); xhr.open(‘GET’, ‘http://localhost:8081’+row.filePath, false);// 文件路径 xhr.overrideMimeType(“text/html;charset=utf-8”);//默认为utf-8 xhr.send(null); this.txtPre = xhr.responseText //console.log(xhr.responseText); //打印文件信息 } if (row.extendName == “docx”) { this.pdfbollean = false; this.pngbollean = false; this.txtbollean = false; this.docxbollean = true; this.xlsxbollean = false; this.pptxbollean = false; this.docxPreview(‘http://localhost:8081’ + row.filePath); } if (row.extendName == “xlsx”) { this.pdfbollean = false; this.pngbollean = false; this.txtbollean = false; this.docxbollean = false; this.xlsxbollean = true; this.pptxbollean = false; this.xlsxPreview(‘http://localhost:8081’ + row.filePath); } if (row.extendName == “pptx”) { //"D:\\202302\\301\\aa.pptx" var newPPT = row.filePath.split('.')[0]+".pdf" getFileBase64({ pptPath: row.filePath, pdfPath: newPPT }).then((res) => { this.url3 = 'http://localhost:8081/wendang/202302/301/' + newPPT; }) this.pdfbollean = false; this.pngbollean = false; this.txtbollean = false; this.docxbollean = false; this.xlsxbollean = false; this.pptxbollean = true; } }, // 渲染docx docxPreview(url) { // 获取文件流 const xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'blob' xhr.onload = () => { if (xhr.status === 200) { console.log(xhr.response) let fr = new FileReader(); fr.readAsArrayBuffer(xhr.response); fr.addEventListener("loadend",(e) => { console.log("loadend---->", e) let buffer = e.target.result; this.docxRender(buffer); }, false); } } xhr.send() }, docxRender(buffer) { let bodyContainer = document.getElementById("container"); renderAsync( buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型 bodyContainer, // HTMLElement 渲染文档内容的元素, null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。 this.docxOptions // 配置 ).then(res => { console.log("res---->", res) }) }, // 渲染docx xlsxPreview(url) { // 获取文件流 const xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'blob' xhr.onload = () => { if (xhr.status === 200) { console.log(xhr.response) let fr = new FileReader(); fr.readAsArrayBuffer(xhr.response); fr.addEventListener("loadend",(e) => { console.log("loadend---->", e) let buffer = e.target.result; this.displayResult(buffer); }, false); } } xhr.send() }, // 嵌入式预览excel displayResult(buffer) { // 生成新的dom const node = document.createElement('div') // 添加孩子，防止vue实例替换dom元素 if (this.last) { this.$refs.output.removeChild(this.last.$el) this.last.$destroy() } const child = this.$refs.output.appendChild(node) // 调用渲染方法进行渲染 return new Promise((resolve, reject) => renderSheet(buffer, child).then(resolve).catch(reject) ) },后台： import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class MyConfig implements WebMvcConfigurer { /* *addResourceHandler:访问映射路径 *addResourceLocations:资源绝对路径 */ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(“/wendang/**”).addResourceLocations(“file:D:/”); } } @RestController @Slf4j @RequestMapping(“/file2”) public class base64 { @GetMapping("/getFileBase64") public String getFileBase64(@RequestParam("pptPath") String pptPath, @RequestParam("pdfPath") String pdfPath){ System.out.println(pptPath); System.out.println(pdfPath); ConvertUtil.ppt2Pdf("D:\\202302\\301\\"+pptPath, "D:\\202302\\301\\"+pdfPath); return pdfPath; }} package com.bysj.backend.util; import com.aspose.slides.License; import com.aspose.slides.Presentation; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; public class ConvertUtil { public static boolean getLicense() { boolean result = false; try { InputStream license = ConvertUtil.class.getClassLoader().getResourceAsStream("license.xml"); com.aspose.slides.License aposeLic = new License(); aposeLic.setLicense(license); result = true; } catch (Exception e) { e.printStackTrace(); } return result; }// public static void main(String[] args){ // ppt2Pdf(“D:\202302\301\22.pptx”,“D:\202302\301\22.pdf”); // } public static boolean ppt2Pdf(String pptPath, String pdfPath) { /* Locale locale = new Locale("zh", "cn"); Locale.setDefault(locale); */ // 验证License if (!getLicense()) { return false; } FileOutputStream fileOS = null; try { File file = new File(pdfPath); Presentation pres = new Presentation(pptPath); fileOS = new FileOutputStream(file); pres.save(fileOS, com.aspose.slides.SaveFormat.Pdf); fileOS.close(); } catch (Exception e) { if(fileOS != null) { try { fileOS.close(); } catch (IOException e1) { e1.printStackTrace(); } } e.printStackTrace(); } return true; }} |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |