vue +pdfkit+wkhtmltopdf导出pdf遇到的问题

一、样式问题

1、使用vue+elementui时，发现有一些组件并不能导出pdf，只能使用传统html和css布局，这样导出的pdf更清晰
2、需要将css集中放到模板文件中，然后将选择的导出模块替换到模板中

二、导出table，换页时表头重复问题

解决办法：

 thead {
     
            display: table-row-group;// 使用thead默认每页都显示表头
        }

三、实现部分

后端

模板export_file.txt：

EXPORT_FILE = os.path.join(PROJECT_ROOT, 'fixtures/export_file.txt')

@csrf_exempt
def export_pdf(request):
    try:
        # params = json.loads(request.body)
        # report_id = params.get('report_id', '')
        # path = params.get('path', '')
        content = request.POST.get("content")
        html_string = format_export_string(content)
        report_id = request.GET["report_id"]
        check_report = CheckReport.objects.get(id=report_id)
        file_name = check_report.task_name + "-" + check_report.created_time + ".pdf"
        options = {
     
            'page-size': 'A4',
            'encoding': "UTF-8",
            "javascript-delay": "5000",
            "margin-top": "0",
            "margin-bottom": "0",
            "margin-left": "0",
            "margin-right": "0",
            'quiet': "",
        }
        if settings.DEBUG:
            configuration = pdfkit.configuration(wkhtmltopdf=r'E:\wkhtmltopdf\bin\wkhtmltopdf.exe')
        else:
            configuration = pdfkit.configuration(wkhtmltopdf='/usr/bin/wkhtmltopdf')
        pdf_path = False
        pdf_file = pdfkit.from_string(html_string, pdf_path, options=options, configuration=configuration)
        # Pdf.objects.create(report_id=report_id, name=file_name, status=True, operator=request.user.username,
        #                    value=pdf_file)
        return download_file(pdf_file, file_name)
    except Exception as e:
        return JsonResponse({
     "result": False, "message": str(e)})


def format_export_string(content):
    export_file = open(EXPORT_FILE, encoding='utf-8')
    file_content = export_file.read()
    export_file.close()
    html_content = content.replace("&", "&").replace(">", ">") \
        .replace('"', '"') \
        .replace("'", r"'") \
        .replace("<", "<") \
        .replace(" ", " ") \
        .replace("\n", '') \
        .replace("\r", "").strip()
    return str(file_content).replace('{body_content}', html_content)


def download_file(file_buffer, file_name):
    response = HttpResponse(file_buffer, content_type='APPLICATION/OCTET-STREAM')
    response['Content-Disposition'] = 'attachment; filename=' + file_name
    response['Content-Length'] = len(file_buffer)
    return response

前端

在vue项目中，css样式放到公共scss中，不要放在vue文件的style中

downLoadPdf() {
     
      const VueEnv = process.env.NODE_ENV
      const ApiUrl = VueEnv === 'production' ? window.siteUrl : 'http://127.0.0.1:8083/'
      const eleForm = document.createElement('form')
      eleForm.id = 'eleForm'
      eleForm.method = 'post'
      eleForm.action = ApiUrl + 'check/export_detail_pdf/?report_id=' + this.reportId + '&ip=' + this.ipAddress
      eleForm.target = '导出报告'
      const eleInput = document.createElement('input')
      eleInput.type = 'hidden'
      eleInput.name = 'content'
      eleInput.value = $('#export-pdf').html()
      eleForm.appendChild(eleInput)
      eleForm.addEventListener('onsubmit', function() {
     
        this.$message.success('导出报告')
      })
      document.body.appendChild(eleForm)
      eleForm.submit()
      document.body.removeChild(eleForm)
    },