Convert PDF Response to Blob for Viewing inline in a Vue component.

pdfView.vue

<template>
  <div>
    <div v-if="error">{{ error }}</div>
    <iframe v-if="pdfUrl" :src="pdfUrl" class="pdf"></iframe>
  </div>
</template>

<script>
const axios = require('axios');

export default {
  data: () => ({
    pdfUrl: null,
    error: null,
  }),
  methods: {
    createBlob(blob) {
      const blobby = new Blob([blob], { type: 'application/pdf' });
      this.pdfUrl = URL.createObjectURL(blobby);
    },
    getPDFDetail() {
      axios
        .get('http://api.yourwebsite.com/pdf', { responseType: 'blob' })
        .then((response) => {
          this.createBlob(response.data);
        })
        .catch(() => {
          this.error = 'Not found';
        });
    },
  },
  created() {
    this.getPDFDetail();
  },
};
</script>

<style scoped>
.pdf {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 999999;
  height: 100%;
}
</style>

views.py

# sample view that the Vue component is requesting at http://api.yourwebsite.com/pdf
# using Django 2.2.4 and WeasyPrint 48

from django.shortcuts import get_object_or_404
from django.template.loader import render_to_string
from weasyprint import HTML
from .models import MyObject


def sample_function_based_view(request, pk):
    # get your object
    my_object = get_object_or_404(MyObject, pk=pk)
    # establish a file name
    file_name = 'pdf_file'
    # this location may depend on how templates are configured in settings
    template = 'template.html'
    # external stylesheets to keep things clean
    styles = ['static/css/template.css']
    # create string. 2nd argument is context, will be available in template
    html_string = render_to_string(template, {'my_object': my_object})
    # prep for weasyprint
    html = HTML(string=html_string, base_url=request.build_absolute_uri())
    # this will create pdf_file.pdf on your system at /tmp
    html.write_pdf(target='/tmp/%s' % file_name, stylesheets=styles)
    fs = FileSystemStorage('/tmp')
    # open and serve as a pdf
    with fs.open(file_name) as pdf:
        response = HttpResponse(pdf, content_type='application/pdf')
        response['Content-Disposition'] = 'inline; filename="%s"' % file_name
        return response