js使用二進制流下載pdf文件（js解析二進制文件流）

本文目錄一覽：

• 1、JS 怎麼讀取二進制文件
• 2、Vue中前端接收二進制文件流實現預覽PDF
• 3、java 數據庫中2進制流image轉成PDF
• 4、js實現各種文件下載，文件類型包括word、excel、exe、pdf、txt、jpg等等
• 5、使用js下載保存pdf文件

JS 怎麼讀取二進制文件

使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩衝)內容,可以使用File對象或者Blob對象來指定所要處理的文件或數據.

readAsBinaryString()

讀取指定的Blob對象或File對象中的內容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含所讀取文件的原始二進制數據.

Vue中前端接收二進制文件流實現預覽PDF

1、後台Controller代碼

@GetMapping(“/common/getPDFStream/{key}”)

public void getPDFStream(@PathVariable String key,HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException {

FileStorage fileStorage = storageService.findByKey(key);

String type = fileStorage.getType();

MediaType mediaType = MediaType.parseMediaType(type);

Resource file = storageService.loadAsResource(key);

if (file == null) {

response.setStatus(-1);

}

try {

//文件所在的路徑file.getURI().getPath()

File file1 = new File(file.getURI().getPath());

byte[] data = null;

FileInputStream input = new FileInputStream(file1);

data = new byte[input.available()];

input.read(data);

response.getOutputStream().write(data);

input.close();

} catch (Exception e) {

e.printStackTrace();

}

}

2、前台接收

封裝axios, request.js

import axios from ‘axios’

/**

* 封裝axios異步請求的方法==================

*/

// 創建一個axios對象———–

const request = axios.create({

baseURL:process.env.VUE_APP_BASE_API,//根據不同的環境，加載不同的常量值

timeout: 50000,//請求超時，50000毫秒

})

// 設置請求攔截器====================================

// 對攔截進行請求——————–

request.interceptors.request.use(config = {

//請求攔截

config.data = {

…config.data,

userId: sessionStorage.getItem(‘userId’)

}

return config;

}, error = {

//出現異常

return Promise.reject(error);//es6寫法

});

// 設置響應攔截器==================================

// 對攔截進行響應——————–

request.interceptors.response.use(response ={

if(!response.data||response.data==””){

return ‘{“flag”:”failure”,”msg”:”未知錯誤”}’;

}

return response.data;

},error ={

return Promise.reject(error);

})

export default request //導出自定義創建的axios對象,供其他組件進行使用

3、定義方法 common.js

import request from ‘@/utils/request’ //導入已經封裝好的axios請求方式

export function getPDFStream(param) {

// 定義後端請求路徑

let url = process.env.VUE_APP_BASE_API + ‘/common/getPDFStream/’ + fileKey

return request.get(url, {

headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },

responseType: ‘blob’

}).then(async (data) = {

console.log(‘getPDFStream data’, data)

const isLogin = await blobValidate(data.data)

console.log(‘download isLogin’, isLogin)

if (isLogin) {

const blob = new Blob([data.data], {type: ‘application/pdf’})

return blob

} else {

const resText = await data.text()

const rspObj = JSON.parse(resText)

const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode[‘default’]

Message.error(errMsg)

}

}).catch((r) = {

console.error(r)

Message.error(‘下載文件出現錯誤，請聯繫管理員！’)

})

}

4、vue頁面代碼

①觸發事件列表標籤

{{scope.row.courseName}}

②預覽展示彈窗

el-dialog p=”” /el-dialog

width=”900px”

title=”預覽”

:visible.sync=”lookPdfFile”

:footer=”null”

:forceRender=”true”

@ok=”lookPdfFile”

③ 需要導入方法、初始值、和自定義方法

// 在vue頁面導入方法getPDFStream

import { getPDFStream } from “@/api/common”;

// 在vue頁面定義data

data () {

return {

lookPdfFile:false,//預覽pdf

pdfUrl:”,// pdf路徑

}

}

// 在vue頁面methods定義方法handlePDF

methods: {

/** 課程預覽 **/

async handlePDF(row) {

console.log(‘handleLook’, row)

this.getPDFStream(row.fileKey).then(res = {

console.log(‘res::::’, res)

// debugger

if (window.createObjectURL !== undefined) { // basic

this.pdfUrl = window.createObjectURL(res) + ‘#toolbar=0’

} else if (window.webkitURL !== undefined) { // webkit or chrome

try {

this.pdfUrl = window.webkitURL.createObjectURL(res) + ‘#toolbar=0’

} catch (error) {

}

} else if (window.URL !== undefined) { // mozilla(firefox)

try {

this.pdfUrl = window.URL.createObjectURL(res) + ‘#toolbar=0’

} catch (error) {

}

}

this.$nextTick(() = {

console.log(‘this.pdfUrl’, this.pdfUrl)

this.lookPdfFile = true

})

})

}

}

java 數據庫中2進制流image轉成PDF

FileUtils.writeByteArrayToFile(new File(“xx.pdf”),p.getBytes());

一般存到數據庫的二進制流都是經過加密的，常用的是base64

byte[]bytes = new BASE64Decoder().decodeBuffer(p);

FileUtils.writeByteArrayToFile(new File(“xx.pdf”),bytes);

js實現各種文件下載，文件類型包括word、excel、exe、pdf、txt、jpg等等

http jq ajax請求後台 返回一個文件 直接就可以下載了 下載地址為瀏覽器設置的默認下載地址

使用js下載保存pdf文件

pdf.js

是基於開放的

html5

及

javascript

技術實現的開源產品。簡單說就是一個

pdf

解析器。運用html5javascript（即pdf.js僅使用安全的web語言，不包含任何攻擊者可以用的本地代碼塊）的pdf閱讀器pdf.js，直接在標準的html頁面上載入和渲染pdf…