前端小功能:Word、PDF、Excel文档vue预览;log日志文件预览。
要工具不区分框架,把FileReader()文件处理函数可以细细品读一下。
可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader文档
同时可以了解一下, Blob ArrayBuffer,等数据格式,ajax如何获取Blod的基本操作。
需要处理文件,必须缓存文件,缓存文件必须解决跨域问题。
js-word文档预览。
如果你的文档都是公网可以访问的,可以用微软提供的在线预览
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>
This is an embedded
<a target='_blank' href='http://office.com'>Microsoft Office</a>
document, powered by
<a target='_blank' href='http://office.com/webapps'>Office Online</a>
</iframe>
如果是本地文件,或者是内网文件则可以使用以下方法:
PDF:Vue-pdf
Word: mammoth.js
Excel: SheetJS
1. PDF文档预览示例:
npm install --save vue-pdf
PDF.vue
<template>
<div>
<pdf ref="pdf" :src="pdfUrl" style="width: 100%;" />
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
data(){
return: {
pdfUrl: '',
}
}
created() {
const path = 'test.pdf'// 你获取到的pdf路径
// pdf.createLoadingTask解决文件件跨域问题
this.pdfUrl = pdf.createLoadingTask(path)
},
}
</script>
2. Word文档预览示例:
npm install --save mammoth
中文文档:https://www.kutu66.com/GitHub/article_106969#1-yfsys
mammoth.convertToHtml(input, options)
将源文档转换为 HTML。
input
: 描述源文档的对象。 在 node.js 上,支持以下输入:
-
{path: path}
,其中path
是. docx 文件的路径。 -
{buffer: buffer}
,其中buffer
是包含. docx 文件的node.js 缓冲区。
在浏览器中,支持以下输入:
-
{arrayBuffer: arrayBuffer}
,其中arrayBuffer
是包含. docx 文件的array 缓冲区。
options
( 可选): 转换的选项。
浏览器表示支持arrayBuffer
转换也仅仅支持docx
具体巧妙用法就请多自行去看文档。
Word.vue
<template>
<div>
<input id="document" type="file">
<div v-html="vHtml" />
</div>
</template>
<script>
import mammoth from 'mammoth'
export default {
data(){
return: {
vHtml: '',
}
}
mounted() {
document.getElementById('document').addEventListener('change', this.uploading, false)
},
methods: {
uploading(event) {
const that = this
var file = event.target.files[0] // 获取文件
var reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = function(e) {
const buffer = e.target.result // 此时是arraybuffer类型
mammoth.convertToHtml({ arrayBuffer: buffer }).then((result) => {
console.log(result)
that.vHtml = result.value
}).done()
}
},
}
}
</script>
3. Excel文档预览示例
npm install --save xlsx
中文文档:https://github.com/rockboom/SheetJS-docs-zh-CN
excel.vue<template>
<div id="table">
<div class="tab">
<el-radio-group v-model="cardActive">
<el-radio-button v-for="(item,index) in card" :label="item" :key="index" @click="chooseTable(item)"></el-radio-button>
</el-radio-group>
</div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
v-for="(value,key,index) in tableData"
:key="index"
:prop="key"
:label="key">
</el-table-column>
</el-table>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
data () {
return {
tableData: [],
card: [],
cardActive: '',
workbook: {}
}
},
watch: {
cardActive (ov, nv) {
this.getTable(ov)
}
},
mounted () {
this.readWorkbookFromRemoteFile('/static/o2.xlsx')
},
methods: {
readWorkbookFromRemoteFile: function (url) {
var xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'arraybuffer'
let _this = this
xhr.onload = function (e) {
if (xhr.status === 200) {
var data = new Uint8Array(xhr.response)
var workbook = XLSX.read(data, {type: 'array'})
console.log(workbook)
var sheetNames = workbook.SheetNames // 工作表名称集合
_this.workbook = workbook
_this.card = sheetNames
_this.cardActive = sheetNames[0]
_this.getTable(sheetNames[0])
}
}
xhr.send()
},
getTable (sheetName) {
var worksheet = this.workbook.Sheets[sheetName]
// 表格列和字段描述,顺序位置改变的情况下必须修改,请仔细参考!!!。
this.tableData = XLSX.utils.sheet_to_json(worksheet,{
header: [
'index',
'insureCompany',
'cooperationTerm',
'cooperationTange',
'branchName',
'serviceNumber',
'onlineWay',
'settlement',
'solvency',
],
})
console.log(this.tableData)
}
}
}
</script>
<style lang="stylus" scoped>
#table
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
border 1px solid #ebebeb
padding 20px
width 80%
margin 20px auto
border-shadow 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5)
border-radius 10px
overflow scroll
height 100%
.tab
margin 0 0 20px 0
display flex
flex-direction row
</style>
<style scoped>
.is-active{
background-color:#409EFF
}
span{
background-color:red
}
</style>
注: 文档使用绝对路径的时候,先解决跨域的问题。
3.1 Excel文档转换js文件,node脚本生成文件
node将Excel文件转换成js导出文件。
用一个轻便的库 node-xlsx,只有14k,比起xlsx的10mb,实在是好太多了
const xlsx = require('node-xlsx');
const fs = require('fs');
const path = require('path');
const nunjucks = require('nunjucks');
/**
* 使用node脚本更新合作保险公司数据
* 信息修改后,启动 npm run node:xlsx 更新文件
* 注意 !!!观察表格列和字段是否匹配,是否有新增修改导致index错乱。
* @param fileName 文档名称
* @param sheetName 指定拉取表格名称
* @param startRow excel文件里的表格一般有标题所以不一定从0开始
*/
const custom = {
fileName: '合作保险公司1.12.xlsx',
sheetName: '合作保险公司(1.12更新)',
startRow: 2,
};
// 文件模板
function getTmpl() {
const tmpl = `/**
* @param companyName 公司简称 // 1.0版本
* @param insureCompany 公司名称
* @param branchName 省级分支机构和落地服务机构的省
* @param serviceNumber 全国统一客服电话
* @param onlineWay 在线服务访问方式
* @param verification 保单验证 // 1.0版本
* @param cooperationTerm 合作期限
* @param cooperationTange 合作范围
* @param solvency 偿付能力、风险综合评级、消费者权益保护
* @param settlement 理赔争议处理
*/
export default [
{% for Sheet in sheetsArray %}{
companyName: "{{Sheet.companyName}}",
insureCompany: "{{Sheet.insureCompany}}",
branchName: "{{Sheet.branchName}}",
serviceNumber: "{{Sheet.serviceNumber}}",
onlineWay: "{{Sheet.onlineWay}}",
verification: "{{Sheet.verification}}",
cooperationTerm: "{{Sheet.cooperationTerm}}",
cooperationTange: "{{Sheet.cooperationTange}}",
solvency: "{{Sheet.solvency}}",
settlement: "{{Sheet.settlement}}",
},{% endfor %}
];
`;
return tmpl;
}
// 单独处理换行符
function handleSettlement(str) {
if (str && typeof str === 'string') {
const newStr = str.replace(/\n/g, '^_^').replace(/\s/g, '');
return newStr;
}
return str;
}
// 清空字符串换行和空格
function handleClear(str) {
if (str && typeof str === 'string') {
return str.replace(/\n/g, '').replace(/\s/g, '');
}
return str;
}
const dirPath = path.resolve(__dirname, custom.fileName);
// 表格列和字段描述,顺序位置改变的情况下必须修改,请仔细参考!!!。
const sheets = xlsx.parse(dirPath, {
header: [
'index',
'insureCompany',
'cooperationTerm',
'cooperationTange',
'branchName',
'serviceNumber',
'onlineWay',
'settlement',
'solvency',
],
});
const sheetsArray = [];
// sheets是一个数组,数组中的每一项对应这个文件里的多个表格
sheets.forEach(function (sheet) {
// 指定拉取表格名称
if (sheet.name === custom.sheetName) {
sheet.data.forEach((item, index) => {
if (index > custom.startRow) {
// 处理数据字符串格式转换, 兼容字段等
sheetsArray.push({
...item,
companyName: item['insureCompany'],
serviceNumber: handleClear(item['serviceNumber']),
onlineWay: handleClear(item['onlineWay']),
verification: handleClear(item['onlineWay']),
settlement: handleSettlement(item['settlement']),
});
}
});
}
});
// 生成or覆盖文件。
const outFile = path.resolve(__dirname, 'inCompany.js');
fs.writeFileSync(
outFile,
nunjucks.renderString(getTmpl(), {
sheetsArray,
})
);
console.warn(`node:xlsx file: ${outFile} success`);
通过nunjucks模板语法对文档内容进行生成,node对文档的处理,生成对应的数据结构文档,这个方法同时也适用其他的文档转换。Excel转js,Excel转json,等数据文档转换,也是可以的。
4. log日志文件预览
word等文档显示,部分样式需要一些基础的库来提供支持,对于log日志形式搜索了一下,基本没有相关的库,一般情况下,如果log是后台生成的,可以让后台直接转json,每一行为一个list,前端直接循环列表显示就OK。
遇到特殊情况,log并非后台生成,第三方平台生成,不经过后台服务的时候,转换json可以就无法实现了。
log前端只能拿到URL的情况,那就直接转文本显示就好了。
非常简单:获取Blob,转换text文本就可以直接显示。
// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest()
// 配置请求方式、请求地址以及是否同步
xhr.open('GET', baseUrl, true)
// 设置请求结果类型为blob
xhr.responseType = 'blob'
// 请求成功回调函数
xhr.onload = function(option:any) {
let res = option.target
if (res.status === 200) {
let blob = res.response
let reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function () {
let data:any = reader.result
setLogHtml(data)
}
if(tip){
message.success({
content: '刷新完成'
})
}
}else{
message.error({
content: '服务异常'
})
setLogHtml('#暂无日志详情')
}
}
xhr.send()
文本可以直接展示的,可能不太雅观,部分换行无法体现。因为是文本,只有给一个textarea,应该就可以解决部分不换行的问题。
如果能力有余,用个代码编辑器,那就很完美了。https://monaco-react.surenatoyan.com/
没有终点,没有彼岸,坚持就好,愿岁月如初
没有终点,没有彼岸,坚持就好,愿岁月如初