网站开发需求分析范本旅游型网站建设

背景需求

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

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

依赖

        <dependency><groupId>org.apache.hadoop</groupId><artifactId>hadoop-common</artifactId><version>3.4.0</version></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 filetry (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);// 判断返回状态是否为200if (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.lengthconst 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 ="\<img src=\"data:image/png;base64," + content + "\">";

将拼接好的 ImgURL 拼接即可