Vue预览word/pdf文件(内外网均可)

预览word文件实现方式有 

1 将文件放在前端静态文件中 实现本地预览 但前端包变得很大 多文件不适合

2 通过跳转外网链接访问 但内网无法使用

3 综合考虑 利用浏览器自带的预览pdf  将文件放在服务器指定目录下

前端代码量很少 无需任何插件 只需调用后端接口(将文件转换为流) 内外网均可预览

目录

后端接口

前端代码

Docx文件转换为pdf文件 

---

前端效果:

 浏览器预览效果:

---

后端接口

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.apache.commons.io.IOUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;

/**
 * @author 夜の雨
 * @date 2022/11/24
 */
@RequestMapping("/fill")
@RestController("project:fill:FilePreviewController")
@Api(tags = "FilePreviewManager", description = "文档在线预览")
public class FilePreviewController {

    protected final Logger logger = LoggerFactory.getLogger(this.getClass());

    @ResponseBody
    @ApiOperation(value = "说明文档在线预览接口")
    @GetMapping("/filePreview")
    public void toPdfFile(HttpServletResponse response) {
        //Linux服务器地址
//      String path = "/home/wordFile/file.pdf";
        //本地测试地址
        String path = "D:/wordFile/file.pdf";
        File outputFile = new File(path);
        try {
            //检查是否存在此文件夹 如没有则创建
            if (!outputFile.exists()) {
                logger.warn("无 wordFile/file.pdf 路径或文件");
            }
            response.setContentType("application/pdf;charset=utf-8");
            ServletOutputStream outputStream = response.getOutputStream();
            // 读取文件
            InputStream in = new FileInputStream(outputFile);
            // copy流数据,i为字节数
            int i = IOUtils.copy(in, outputStream);
            in.close();
            outputStream.close();
            logger.info("流已关闭,可预览,该文件字节大小：" + i);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

接口地址允许匿名访问

//说明文档预览
.antMatchers("/fill/filePreview").permitAll()

 前端代码

<h2>说明文档:
    <el-button type="primary" size="medium" icon="el-icon-document" @click="onlinePreview">点击预览</el-button>
</h2>


methods: {
onlinePreview() {
// 服务器地址
// const w = window.open("http://ip/../fill/filePreview");
    //本地测试地址(跳转到filePreview接口)
    const w = window.open("http://localhost:80/.../fill/filePreview");
    //延迟刷新浏览器标签页名 防止不显示
    setTimeout(function () {
    w.document.title = "说明文档"
    }, 100);
}
}

Docx文件转换为pdf文件 

 

 将文件放在指定目录下

最后点击页面按钮 就可以愉快的预览文件啦

大家根据代码自行调整哦 如果有什么问题 欢迎留言讨论~🥰