vue预览pdf和视屏及excel

vue预览pdf和视屏及excel

预览pdf

<el-dialog :visible.sync="dialogVisible">
            <embed :src="dialogPdfUrl" style="width: 100%;height: 400px;"/>
 </el-dialog>

dialogPdfUrl　为pdf文件的路径《参考访问项目外的文件》

预览video

<el-dialog :visible.sync="dialogVisible" @close="closeDialog">
            <video :src="dialogVideoUrl" controls autoplay class="video"
                   width="100%"></video>
</el-dialog>

dialogPdfUrl　为视屏文件的路径《参考访问项目外的文件》

预览excel

<el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
        <el-scrollbar style="height:100%;">
            <div style="height:500px;" v-html="htmlPreview"></div>
        </el-scrollbar>
</el-dialog>

htmlPreview为后台方法返回前端的html字符串

pom依赖

<!--easypoi 依赖-->
<dependency>
     <groupId>cn.afterturn</groupId>
     <artifactId>easypoi-spring-boot-starter</artifactId>
     <version>3.3.0</version>
</dependency>

转换代码

ExcelToHtmlParams params = null;
try {
    params = new ExcelToHtmlParams(WorkbookFactory.create(
            POICacheManager.getFile(fileAddress)));
} catch (Exception e) {
    e.printStackTrace();
    LOGGER.info(e.getLocalizedMessage());
}
String views = ExcelXorHtmlUtil.excelToHtml(params);

效果如图