Блог

В настоящее время у меня есть HTML-страница, которая встраивает BPMN Modeler через https://bpmn.io /. Это работает так, что у меня есть пустой файл .bpmn в моем каталоге мультимедиа, и каждый раз, когда я захожу на свою страницу, например, он загружает пустой файл .bpmn, и пользователь может свободно моделировать свою собственную диаграмму оттуда.

Теперь я хотел бы, чтобы пользователь мог загрузить свой файл .bpmn, который он создал на странице.

Я никогда раньше не работал с JS и Django. Я действительно не знаю, как передать мою измененную диаграмму .bpmn обратно в мою функцию django view downlad.

Позвольте мне показать код, который я до сих пор, начиная с bpmn.io скрипт, который позволяет пользователю работать со схемой (modeler.html ):

 <link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.0.0/dist/assets/diagram-js.css"/>
<link rel="stylesheet" href="https://unpkg.com/bpmn-js@8.0.0/dist/assets/bpmn-font/css/bpmn.css"/>

<script src="https://unpkg.com/bpmn-js@8.0.0/dist/bpmn-modeler.development.js"></script>
<script>
    function fetchDiagram(url) {
        return fetch(url).then(response => response.text());
    }

    var bpmnJS = new BpmnJS({
        container: '#canvas',
        width: '100%',
        height: '600px',
    });

    async function openDiagram() {
        const diagram = await fetchDiagram('static/bpmn/empty_bpmn.bpmn');
        try {
            await bpmnJS.importXML(diagram);
            viewer.get('canvas').zoom('fit-viewport');
        } catch (err) {

            console.error('something went wrong:', err);
        }
    }
    openDiagram();
</script>
 

и соответствующие функции представления для этого (views.py ):

 def modeler(request):
    return render(request, 'core/modeler.html')

def download_bpmn(request):

    response = HttpResponse(content_type='application/bpmn')
    response['Content-Disposition'] = 'attachment; filename="your_diagram.bpmn"'
    return response
 

кнопка загрузки (modeler.html ):

 <div class="col-2">
    <a class="btn btn-primary" href="{% url 'download_bpmn' %}"> Download </a>
</div>
 

TLDR:
Есть ли способ передать мою диаграмму bpmn обратно в django, чтобы я мог создать функцию просмотра, которая позволяет пользователю загружать свою диаграмму?

Для этого я использовал ajax. Я отправляю XML в представление, которое создает и сохраняет документ в модели с полем FileField, затем вы можете предоставить URL-адрес документа пользователю.

AJAX:

 async function exportDiagram() {
    const csrftoken = getCookie('csrftoken');
    try {
        var result = await bpmnModeler.saveXML({ format: true });
        $.ajax({
            type: 'POST',
            url: url,
            headers: {'X-CSRFToken': csrftoken},
            data: {'data' : result.xml},
            success: function(response){
            },
        })

    } 
    catch (err) {
        console.error('Erro ao salvar BPMN 2.0', err);
    }
}
$('#save-button').click(exportDiagram);
 

Вид:

 def modeler(request, pk):
    if request.method == "POST":
        content = request.POST.get('data')
        bpmn = Bpmn() 
        bpmn.Filefield.save(f'{diagrama.titulo}.bpmn', ContentFile(content))  
    return render(request, 'bpmn.html')