读取连接中文件流和页面展示base64编码的文件

背景需求

我需要展示一个pdf 文件在页面上，但是我一直没办法将 pdf的下载链接用预览方式展示出来，于是打算讨个巧，直接给前端页面发送 Base64 编码的字符串，用来展示pdf文件。而正好我们的文件也有一个获取流的接口。于是，变出现了这篇文章。

从接口处获取base64编码的字节流

依赖

        <dependency>
            <groupId>org.apache.hadoopgroupId>
            <artifactId>hadoop-commonartifactId>
            <version>3.4.0version>
        dependency>

java 代码

1. 直接从 URL 获取流

    public static String downloadFile3(String UrlFilePath, String localFilePath) {
        URL url = null;
        HttpURLConnection httpUrl = null;
        try {
            url = new URL(UrlFilePath);
            httpUrl = (HttpURLConnection) url.openConnection();
            // 设置请求方式，默认是GET
            // httpUrl.setRequestMethod("POST");
            httpUrl.connect();
            try (BufferedInputStream bis = new BufferedInputStream(httpUrl.getInputStream())) {
                byte[] bytes = IOUtils.toByteArray(bis);
                String base64String = Base64.getEncoder().encodeToString(bytes);

                // Write the BASE64 encoded string to the file
                try (BufferedWriter writer = new BufferedWriter(new FileWriter(localFilePath))) {
                    writer.write(base64String);
                }
                return base64String;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "";
    }

2. 发送 GET 请求 获取流

/**
     * @param url 远程文件路径
     * @return base64 编码字符串
     */
    public static String byGet(String url) {
        // 创建Httpclient对象
        CloseableHttpClient httpclient = HttpClientBuilder.create().build();
        RequestConfig requestConfig = RequestConfig.custom().setConnectTimeout(30000).setConnectionRequestTimeout(30000).setSocketTimeout(30000).build();

        String resultString = "";
        CloseableHttpResponse response = null;
        try {
            URIBuilder builder = new URIBuilder(url);
            URI uri = builder.build();
            // 创建http GET请求
            HttpGet httpGet = new HttpGet(uri);
            httpGet.setConfig(requestConfig);
            httpGet.addHeader("Content-type", "application/json; charset=utf-8");

            // 执行请求
            response = httpclient.execute(httpGet);


            // 判断返回状态是否为200
            if (response.getStatusLine().getStatusCode() == 200) {
                InputStream inputStream = response.getEntity().getContent();
                byte[] bytes = IOUtils.toByteArray(inputStream);
                BASE64Encoder encoder = new BASE64Encoder();
                resultString = encoder.encode(bytes);
                return resultString;
            }
        } catch (Exception e) {

        } finally {
            try {
                if (response != null) {
                    response.close();
                }
                httpclient.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return "";
    }

前端展示

pdf

        function viewPdf (content) {

            const blob = this.base64ToBlob(content)
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(blob)
            } else {
                const fileURL = URL.createObjectURL(blob)
                window.open(fileURL)
            }
        }
        function base64ToBlob (code) {
            code = code.replace(/[\n\r]/g, '')
            const raw = window.atob(code)
            const rawLength = raw.length
            const uInt8Array = new Uint8Array(rawLength)
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i)
            }
            return new Blob([uInt8Array], { type: 'application/pdf' })
        }

图片

let ImgURL ="\ + content + "\">";

将拼接好的 ImgURL 拼接即可