2

目前我有一个 HTML 页面，它通过https://bpmn.io/嵌入了一个BPMN 建模器。他们的工作方式是我的媒体目录中有一个空的 .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>

以及 this(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，这样我就可以创建一个视图函数，使用户能够下载他的图？

4

1 回答 1

0

我使用ajax来做到这一点。我将 XML 发送到一个视图，该视图在具有 FileField 的模型中创建和保存文档，然后您可以将文档的 url 提供给用户。

阿贾克斯：

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')
于 2022-02-09T12:47:02.210 回答