Dynamic HTML Printing - JSFiddle
HTML
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="application">
<div :id="'print-area-' + item.id" v-for="item in items" class="print-area">
<img :src="item.image">
<button @click="print(item)">Print</button>
</div>
</div>
CSS
.print-area {
margin-bottom: 20px;
}
JavaScript
new Vue({
el: '#application',
data: {
items: [
{
id: 1,
image: "http://printjs.crabbly.com/images/print-01.jpg"
},
{
id: 3,
image: "http://printjs.crabbly.com/images/print-03.jpg"
}
]
},
methods: {
print(item) {
printJS('print-area-' + item.id, 'html');
}
}
})