Vue预览word/pdf文件(内外网均可)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue预览word/pdf文件(内外网均可)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

预览word文件实现方式有

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

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

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

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

后端接口

前端代码

Docx文件转换为pdf文件

前端效果:

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

浏览器预览效果:

Vue预览word/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);
}
}