Skip to content

Instantly share code, notes, and snippets.

@BrandonDavidDee
Last active November 14, 2019 15:13
Show Gist options
  • Save BrandonDavidDee/f4f957b9aa332e99dd1d3d8fe30150f7 to your computer and use it in GitHub Desktop.
Save BrandonDavidDee/f4f957b9aa332e99dd1d3d8fe30150f7 to your computer and use it in GitHub Desktop.
Convert PDF Response to Blob for Viewing inline in a Vue component.
<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>
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment