ofd文件的查看、打印、下載、上傳

文末已附相關代碼

github源碼：https://github.com/DLTech21/ofd.js
使用方法：

npm i ofd.js

import {parseOfdDocument, renderOfd} from "ofd.js";

html片段：

一、查看

二、打印：

三 、下載

四、上傳：

電子發票 ElectronicInvoice.vue文件

<!-- ElectronicInvoice created by pq 2021/01/25 --><template><div class="container"><el-header style="background:#F5F5F5;display: flex; height: 40px; border: 1px solid #e8e8e8; align-items: center;"><div class="upload-icon" @click="previewPrint">查看電子發票</div><div class="upload-icon" @click="print"><div class="btn">打印</div><i class="icon el-icon-printer"/></div><div class="upload-icon" @click="downOfd"><div class="btn">下載Ofd文件</div><i class="icon el-icon-download"/></div><div class="upload-icon" @click="uploadFile"><div class="btn">打開OFD文件</div><input type="file" ref="file" class="hidden" accept=".ofd"@change="fileChanged"></div></el-header><el-main class="mainOfd" v-loading="loading" id="main"><div class="main-section" id="content" ref="contentDiv" @mousewheel="scrool"><div class="seal_img_div"></div></div></el-main></div></template> <script>import { parseOfdDocument, renderOfd } from 'ofd.js'import * as JSZipUtils from "jszip-utils";import axios from '@/utils/http';import {API_GATEWAY} from '@/config/index.js'export default {name: '',components: {},props: {},data() {return {file:null,ofdBase64: null,rowId: this.$route.query.id,}},watch: {'$route': {handler(to, from) {if (to.path === '/ElectronicInvoice') {this.rowId = this.$route.query.idthis.previewPrint()}},immediate: true},},created() {},methods:{// 觸發上傳ofd文件的按鈕uploadFile() {this.file = null;this.$refs.file.click();},// 解析上傳的ofd文件fileChanged() {this.file = this.$refs.file.files[0]let ext = this.file.name.replace(/.+\./, '')if (['ofd'].indexOf(ext) === -1) {this.$alert('error', '僅支持ofd類型', {confirmButtonText: '確定',callback: (action) => {this.$message({type: 'info',message: `action: ${action}`,})},})return}if (this.file.size > 100 * 1024 * 1024) {this.$alert('error', '文件大小需 < 100M', {confirmButtonText: '確定',callback: (action) => {this.$message({type: 'info',message: `action: ${action}`,})},})return}let that = this//轉換器let reader = new FileReader()reader.readAsDataURL(this.file)reader.onload = function (e) {that.ofdBase64 = e.target.result.split(',')[1]}this.handleChange(this.file)this.$refs.file.value = null},// 上傳文件 打開handleChange(file) {let that = thisparseOfdDocument({ofd: file,success(res) {//輸出ofd每頁的divlet screenWidth = 900const divs = renderOfd(screenWidth, res[0])let contentDiv = document.getElementById('content')contentDiv.innerHTML = ''for (const div of divs) {contentDiv.appendChild(div)}for(let ele of document.getElementsByName('seal_img_div')) {that.addEventOnSealDiv(ele, JSON.parse(ele.dataset.sesSignature), JSON.parse(ele.dataset.signedInfo));}},fail(error) {console.log(error)},})},// 解析返回的文件流previewPrint() {this.$http({url: API_GATEWAY + '/api/purchase/e/invoice/ofd/'+ this.rowId,method: 'get',headers: {'Authorization': 'Bearer ' + window.sessionStorage.getItem('token'),'Accept': 'application/json','X-TenantId': JSON.parse(window.sessionStorage.getItem('user')).tenantId,'Content-Type': 'application/octet-stream; charset=UTF-8'},responseType: 'arraybuffer'}).then((response) => {if (response.status !== 200) {this.$message.error('操作失敗')return}let that = thisvar str = response.dataparseOfdDocument({ofd: str,success(res) {//輸出ofd每頁的divlet screenWidth = 900const divs = renderOfd(screenWidth, res[0]);let contentDiv = document.getElementById('content')contentDiv.innerHTML = ''for (const div of divs) {contentDiv.appendChild(div)}},fail(error) {that.$message.error(error)console.log(error)}})})},addEventOnSealDiv(div, SES_Signature, signedInfo) {try {global.HashRet=null;global.VerifyRet=signedInfo.VerifyRet;div.addEventListener("click",function(){document.getElementById('sealInfoDiv').hidden = false;document.getElementById('sealInfoDiv').setAttribute('style', 'display:flex;align-items: center;justify-content: center;');if(SES_Signature.realVersion<4){document.getElementById('spSigner').innerText = SES_Signature.toSign.cert['commonName'];document.getElementById('spProvider').innerText = signedInfo.Provider['@_ProviderName'];document.getElementById('spHashedValue').innerText = SES_Signature.toSign.dataHash.replace(/\n/g,'');document.getElementById('spSignedValue').innerText = SES_Signature.signature.replace(/\n/g,'');document.getElementById('spSignMethod').innerText = SES_Signature.toSign.signatureAlgorithm.replace(/\n/g,'');document.getElementById('spSealID').innerText = SES_Signature.toSign.eseal.esealInfo.esID;document.getElementById('spSealName').innerText = SES_Signature.toSign.eseal.esealInfo.property.name;document.getElementById('spSealType').innerText = SES_Signature.toSign.eseal.esealInfo.property.type;document.getElementById('spSealAuthTime').innerText = "從 "+SES_Signature.toSign.eseal.esealInfo.property.validStart+" 到 "+SES_Signature.toSign.eseal.esealInfo.property.validEnd;document.getElementById('spSealMakeTime').innerText = SES_Signature.toSign.eseal.esealInfo.property.createDate;document.getElementById('spSealVersion').innerText = SES_Signature.toSign.eseal.esealInfo.header.version;}else{document.getElementById('spSigner').innerText = SES_Signature.cert['commonName'];document.getElementById('spProvider').innerText = signedInfo.Provider['@_ProviderName'];document.getElementById('spHashedValue').innerText = SES_Signature.toSign.dataHash.replace(/\n/g,'');document.getElementById('spSignedValue').innerText = SES_Signature.signature.replace(/\n/g,'');document.getElementById('spSignMethod').innerText = SES_Signature.signatureAlgID.replace(/\n/g,'');document.getElementById('spSealID').innerText = SES_Signature.toSign.eseal.esealInfo.esID;document.getElementById('spSealName').innerText = SES_Signature.toSign.eseal.esealInfo.property.name;document.getElementById('spSealType').innerText = SES_Signature.toSign.eseal.esealInfo.property.type;document.getElementById('spSealAuthTime').innerText = "從 "+SES_Signature.toSign.eseal.esealInfo.property.validStart+" 到 "+SES_Signature.toSign.eseal.esealInfo.property.validEnd;document.getElementById('spSealMakeTime').innerText = SES_Signature.toSign.eseal.esealInfo.property.createDate;document.getElementById('spSealVersion').innerText = SES_Signature.toSign.eseal.esealInfo.header.version;}document.getElementById('spVersion').innerText = SES_Signature.toSign.version;document.getElementById('VerifyRet').innerText = "文件摘要值后臺驗證中，請稍等... "+(global.VerifyRet?"簽名值驗證成功":"簽名值驗證失敗");if(global.HashRet==null||global.HashRet==undefined||Object.keys(global.HashRet).length <= 0){setTimeout(function(){const signRetStr = global.VerifyRet?"簽名值驗證成功":"簽名值驗證失敗";global.HashRet = digestCheck(global.toBeChecked.get(signedInfo.signatureID));const hashRetStr = global.HashRet?"文件摘要值驗證成功":"文件摘要值驗證失敗";document.getElementById('VerifyRet').innerText = hashRetStr+" "+signRetStr;},1000);}});} catch (e) {console.log(e);}if (!global.VerifyRet) {div.setAttribute('class', 'gray');}},// 把ofd下載成pdf格式-但未成功// downPdf() {// let that = this;// this.loading = true;// this.$http({// url: API_GATEWAY + '/api/purchase/e/invoice/ofd/'+ this.rowId,// method: 'get',// headers: {// 'Authorization': 'Bearer ' + window.sessionStorage.getItem('token'),// 'Accept': 'application/json',// 'X-TenantId': JSON.parse(window.sessionStorage.getItem('user')).tenantId,// 'Content-Type': 'application/octet-stream; charset=UTF-8'// },// responseType: 'arraybuffer'// }).then(response => {// that.loading = false;// var view = response.data// var blob = new Blob( [view], { type: 'application/pdf' })// var url = URL.createObjectURL(blob);// let link = document.createElement('a')// link.style.display = 'none'// link.href = url// link.setAttribute('download', 'ofd.ofd')// document.body.appendChild(link)// link.click()// }).catch(error => {// console.log(error, "error")// that.$alert('OFD打開失敗', error, {// confirmButtonText: '確定',// callback: action => {// this.$message({// type: 'info',// message: `action: ${ action }`// });// }// });// });// },// 下載OFD文件downOfd() {let that = this;this.loading = true;this.$http({url: API_GATEWAY + '/api/purchase/e/invoice/ofd/'+ this.rowId,method: 'get',headers: {'Authorization': 'Bearer ' + window.sessionStorage.getItem('token'),'Accept': 'application/json','X-TenantId': JSON.parse(window.sessionStorage.getItem('user')).tenantId,'Content-Type': 'application/octet-stream; charset=UTF-8'},responseType: 'arraybuffer'}).then(response => {that.loading = false;var view = response.datavar blob = new Blob( [view], null);var url = URL.createObjectURL(blob);let link = document.createElement('a')link.style.display = 'none'link.href = urlvar fileName = this.rowId + '_ofd.ofd'link.setAttribute('download', fileName)document.body.appendChild(link)link.click()}).catch(error => {console.log(error, "error")that.$alert('OFD下載失敗', error, {confirmButtonText: '確定',callback: action => {this.$message({type: 'info',message: `action: ${ action }`});}});});},// 打印print() {let dom = this.$refs["contentDiv"];let childs = dom.children;this.loading = true;this.progressVisible=true;let list=[];let i=0;for (let ele of childs) {list.push(ele.cloneNode(true));this.percentage=i/childs.length;}if(list.length>0){var mywindow = window.open("打印窗口", "_blank");//給新打開的標簽頁添加畫布內容（這里指的是id=div2img元素的內容）var documentBody = mywindow.document.body;for (let canvas of list) {documentBody.appendChild(canvas);}this.progressVisible=false;this.loading = false;//焦點移到新打開的標簽頁mywindow.focus();//執行打印的方法（注意打印方法是打印的當前窗口內的元素，所以前面才新建一個窗口：print()--打印當前窗口的內容。）mywindow.print();//操作完成之后關閉當前標簽頁（點擊確定或者取消都會關閉）mywindow.close();}},}}</script><style scoped lang="scss">.upload-icon {display: flex;cursor: pointer;justify-content: center;align-items: center;height: 28px;padding-left: 10px;padding-right: 10px;background-color: rgb(59, 95, 232);border-radius: 1px;border-color: #5867dd;font-weight: 500;font-size: 12px;color: white;margin: 0 20px 0 0;.btn{margin-right: 5px;}} .hidden {display: none !important;}.mainOfd{height: 100%;background: rgb(128, 128, 128);padding: 0px;position: absolute;width: 100%;}.main-section {display: flex;flex-direction: column;align-items: center;justify-content: center;background: #808080;overflow: hidden;position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);} @media (max-width: 767px) {.main-section {padding-top: 20px;margin-left:0px;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #808080;overflow: hidden}}</style>

總結

以上是生活随笔為你收集整理的ofd文件的查看、打印、下载、上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。