嵌入式BPMN编辑器需要使用django的工作下载按钮

Question

目前，我有一个HTML，它通过嵌入了一个https://bpmn.io/ BPMN。它们的工作方式是，我的媒体目录中有一个空的.bpmn文件，每次我访问页面时(例如，)，它都加载空的.bpmn文件，用户可以在那里自由地建模自己的图表。

现在，我希望用户能够下载他在页面上创建的.bpmn文件。

我以前从没和JS和Django合作过。我真的不知道如何将修改后的.bpmn图传回我的django视图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，这样我就可以创建一个视图函数，让用户可以下载他的图表了？

Answer 1

我用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')