Как правильно отобразить файл .dwg в веб-приложении Reactjs
В настоящее время я хочу отобразить большой .dwg
файл в веб-приложении reactjs, .dwg
файл будет получен с моего django
сервера. Также я буду выполнять некоторую фильтрацию файла .dwg
, чтобы показать координаты различных IoT-устройств.
После нескольких часов исследований я обнаружил, что есть два способа показать файл .dwg
в веб-приложении reactjs. Либо использовать расширение autodesk forge viewer в reactjs, однако существует мало руководств о том, как реализовать это шаг за шагом. Другим решением является преобразование файла .dwg
в файл .dxf
и отображение его в веб-приложении.
Я хочу знать, какое решение лучше, и, пожалуйста, укажите мне, если я ошибаюсь в решениях. Я имею в виду, что я действительно хочу сделать это с помощью стандартной практики. Очень признателен.
Python предназначен для бэкенда, а react.js работает на фронт-энде, так что нет ничего особенного по сравнению с другими приложениями Forge Viewer. Вы можете поместить его в Django view с моими ограниченными знаниями о фреймворке Django.
Вам просто нужно обернуть Forge Viewer в компонент React, затем отрендерить и смонтировать его в DOM. Кроме того, перед использованием Forge Viewer, вам необходимо вызвать Model Derivative API's POST job для перевода вашего DGW
в SVF
, а затем передать закодированный в base64 URN в реакт-компонент Viewer. Вот реакт-компонент Forge Viewer для демонстрации, а также учебник по использованию Model Derivative API
https://github.com/yiskang/forge-viewer-react-component-demo/blob/main/src/Viewer.jsx
BTW, для преобразования DWG в SVF, здесь есть разница в конфигурации задания для DWG, так как это не заархивированный файл
curl -X POST \
'https://developer.api.autodesk.com/modelderivative/v2/designdata/job' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer <YOUR_ACCESS_TOKEN>' \
-H 'x-ads-force: true' \
-d '{
"input": {
"urn": "<BASE64_ENCODED_URN_OF_SOURCE_FILE>",
},
"output": {
"formats": [
{
"type": "svf",
"views": [
"2d",
"3d"
]
}
]
}
}'