接尾辞 dwg が付いたファイルをプレビューする
xxx.dwg など、dwg の接尾辞が付いたファイルをプレビューすると、バックエンドは dwg ファイルを vsf ストリーム ファイルに変換します。次に、フロントエンドは VisualJS を使用してプレビューできます。具体的な実装は次のとおりです。
Vue3で
1. Visualize プレビュー ツールとその関連依存関係を一般公開します。
2.index.htmlに導入
3. .vue ファイルで使用する
<template>
<canvas id="dwg-canvas" style="width: 100%; height: 100%"></canvas>
</template>
<script lang="ts" setup>
import {
watch } from 'vue';
// dwgUrl: vsf流文件路径
// 该路径可以是:本地文件路径,如:/public/xxx.vsf
// 也可以是:后端接口 http:xxxx/xxx.vsf
const props = defineProps({
dwgUrl: {
type: String,
default: () => '',
},
});
const previewDWG = (dwgUrl) => {
// getVisualizeLibInst 全局方法,只要引入了VisualizeJS即可使用
const lib = window.getVisualizeLibInst();
const token = localStorage.getItem('TOKEN') as string;
const headers = {
Authorization: `Bearer ${
JSON.parse(token).access_token}`,
};
lib.postRun.push(() => {
const canvas = document.getElementById('dwg-canvas') as HTMLCanvasElement;
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
lib.canvas = canvas;
lib.Viewer.initRender(canvas.width, canvas.height, true);
const viewer = lib.Viewer.create();
function resize() {
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
viewer.resize(0, canvas.width, canvas.height, 0);
viewer.update();
}
resize();
window.addEventListener('resize', resize);
const plugin = new window.OdaViewerPlugin(lib);
plugin.setActive(plugin.type.Pan);
plugin.setAutoSelect(true);
// headers : 后端vsf接口需要权限时,需要携带token
fetch(dwgUrl, {
headers })
.then((responce) => responce.arrayBuffer())
.then((arrayBuffer) => {
viewer.clear();
viewer.parseFile(new Uint8Array(arrayBuffer));
viewer.zoomExtents();
});
function render() {
viewer.update();
requestAnimationFrame(render);
}
render();
});
};
watch(
() => props.dwgUrl,
(dwgUrl) => {
previewDWG(dwgUrl);
},
{
immediate: true,
deep: true,
},
);
</script>