背景需求
我需要展示一个pdf 文件在页面上,但是我一直没办法将 pdf的下载链接用预览方式展示出来,于是打算讨个巧,直接给前端页面发送 Base64 编码的字符串,用来展示pdf文件。而正好我们的文件也有一个获取流的接口。于是,变出现了这篇文章。
从接口处获取base64编码的字节流
依赖
<dependency>
<groupId>org.apache.hadoop</groupId>
<artifactId>hadoop-common</artifactId>
<version>3.4.0</version>
</dependency>
java 代码
- 直接从 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 "";
}
- 发送 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 "";
}
前端展示
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 ="\<img src=\"data:image/png;base64," + content + "\">";
将拼接好的 ImgURL
拼接即可