嵌入式 BPMN 编辑器需要一个可用的 Django 下载按钮

Question

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

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

我以前从未使用过 JS 和 Django。我真的不知道如何将修改后的 .bpmn 图传回我的 django 视图下载函数。

让我展示一下我到目前为止的代码，从 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')

嵌入式 BPMN 编辑器需要一个可用的 Django 下载按钮

Embedded BPMN editor needs a working download button with django

html

javascript

python

django

bpmn.io