ofd发票类型用得现在也比较多了，但线上文档插件比较少，在github找到了ofd.js,故记录一下使用情况

ofd 预览

ofd 读写

github在线预览例子

<template>
	<div id="content" class="content_wrap">
		<div class="seal_img_div"></div>
	</div>
</template>

<script>
import { parseOfdDocument, renderOfd } from "ofd.js";
export default {
	props: {
		fileurl: {
			type: String,
			default:
				"http://wechatapppro-1252524126.file.myqcloud.com/1252524126/images/feb651856e28a850325c3774ff03e61e.1.ofd",
		},
		screenWidth: {
			type: Number,
			default: 400,
		},
	},
	data() {
		return {};
	},
	mounted() {
        //直接预览ofd文件
		this.renderOfdFile(this.fileurl);
	},
	watch: {},
	methods: {
        /**
         * 选择文件上传
        */
		fileChanged() {
			const file = this.$refs.file.files[0];
			this.renderOfdFile(file);
		},
        /**
         * ofd格式文件渲染
        */
		renderOfdFile(file) {
			const that = this;
			parseOfdDocument({
				ofd: file,//file 可以为文件链接、上传的文件对象
				success(res) {
					//输出ofd每页的div
					const divs = renderOfd(that.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")) {
						this.addEventOnSealDiv(
							ele,
							JSON.parse(ele.dataset.sesSignature),
							JSON.parse(ele.dataset.signedInfo)
						);
					}
				},
				fail(error) {
					console.log(error);
				},
			});
		},
	},
};
</script>

<style scoped lang="scss"></style>