fixed pdf export

This commit is contained in:
vabene1111 2024-01-28 11:39:00 +01:00
parent f0853ee11c
commit 09c1446c06
4 changed files with 31 additions and 32 deletions

View File

@ -23,7 +23,6 @@
"babel-loader": "^9.1.0", "babel-loader": "^9.1.0",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
"core-js": "^3.29.1", "core-js": "^3.29.1",
"html2pdf.js": "^0.10.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mavon-editor": "^2.10.4", "mavon-editor": "^2.10.4",
"moment": "^2.29.4", "moment": "^2.29.4",

View File

@ -7,7 +7,7 @@
<div class="row"> <div class="row">
<div class="col-12 col-xl-8 offset-xl-2"> <div class="col-12 col-xl-8 offset-xl-2">
<div class="row float-top w-100"> <div class="row float-top w-100">
<div class="col-auto no-gutter ml-auto"> <div class="col-auto no-gutter ml-auto d-print-none">
<b-button variant="link" @click="useShoppingListStore().undoChange()"><i class="fas fa-undo"></i> <b-button variant="link" @click="useShoppingListStore().undoChange()"><i class="fas fa-undo"></i>
</b-button> </b-button>
@ -37,6 +37,7 @@
<!-- shopping list tab --> <!-- shopping list tab -->
<b-tab active> <b-tab active>
<template #title> <template #title>
<div class="d-print-none">
<i v-if="!shopping_list_store.currently_updating && useShoppingListStore().autosync_has_focus" <i v-if="!shopping_list_store.currently_updating && useShoppingListStore().autosync_has_focus"
class="fas fa-shopping-cart fa-fw"></i> class="fas fa-shopping-cart fa-fw"></i>
<i v-if="!shopping_list_store.currently_updating && !useShoppingListStore().autosync_has_focus" <i v-if="!shopping_list_store.currently_updating && !useShoppingListStore().autosync_has_focus"
@ -46,7 +47,7 @@
<span class="d-none d-md-inline-block ml-1"> <span class="d-none d-md-inline-block ml-1">
{{ $t('Shopping_list') + ` (${shopping_list_store.total_unchecked_food})` }} {{ $t('Shopping_list') + ` (${shopping_list_store.total_unchecked_food})` }}
</span> </span>
</div>
</template> </template>
<b-row class="d-lg-block d-print-none d-none pr-1 pl-1 mb-3 mt-3"> <b-row class="d-lg-block d-print-none d-none pr-1 pl-1 mb-3 mt-3">
@ -77,7 +78,7 @@
}}</span> }}</span>
<span v-else>{{ c.name }}</span> <span v-else>{{ c.name }}</span>
</b-button> </b-button>
<b-button <b-button class="d-print-none "
:class="{'btn-success':(c.count_unchecked > 0), 'btn-warning': (c.count_unchecked <= 0)}" :class="{'btn-success':(c.count_unchecked > 0), 'btn-warning': (c.count_unchecked <= 0)}"
@click="checkGroup(c, (c.count_unchecked > 0))"> @click="checkGroup(c, (c.count_unchecked > 0))">
<i class="fas fa-fw" <i class="fas fa-fw"
@ -95,10 +96,13 @@
<!-- --------------------------------------- recipe tab --> <!-- --------------------------------------- recipe tab -->
<b-tab :title="$t('Recipes')"> <b-tab :title="$t('Recipes')">
<template #title> <template #title>
<div class="d-print-none">
<i class="fas fa-book fa-fw"></i> <i class="fas fa-book fa-fw"></i>
<span class="d-none d-md-inline-block ml-1">{{ <span class="d-none d-md-inline-block ml-1">{{
$t('Recipes') + ` (${Object.keys(shopping_list_store.getAssociatedRecipes()).length})` $t('Recipes') + ` (${Object.keys(shopping_list_store.getAssociatedRecipes()).length})`
}}</span> }}</span>
</div>
</template> </template>
<b-row class="d-lg-block d-print-none d-none pr-1 pl-1 mb-3 mt-3"> <b-row class="d-lg-block d-print-none d-none pr-1 pl-1 mb-3 mt-3">
@ -137,10 +141,10 @@
<!-- --------------------------------------- supermarkets tab --> <!-- --------------------------------------- supermarkets tab -->
<b-tab> <b-tab>
<template #title> <template #title>
<div class="d-print-none">
<i class="fas fa-store-alt fa-fw"></i> <i class="fas fa-store-alt fa-fw"></i>
<span class="d-none d-md-inline-block ml-1">{{ <span class="d-none d-md-inline-block ml-1">{{ $t('Supermarkets') + ` (${shopping_list_store.supermarkets.length})` }}</span>
$t('Supermarkets') + ` (${shopping_list_store.supermarkets.length})` </div>
}}</span>
</template> </template>
<div class="container p-0"> <div class="container p-0">
<div class="row"> <div class="row">
@ -339,8 +343,10 @@
<!-- --------------------------------------- settings tab --> <!-- --------------------------------------- settings tab -->
<b-tab> <b-tab>
<template #title> <template #title>
<div class="d-print-none">
<i class="fas fa-user-cog fa-fw"></i> <i class="fas fa-user-cog fa-fw"></i>
<span class="d-none d-md-inline-block ml-1">{{ $t('Settings') }}</span> <span class="d-none d-md-inline-block ml-1">{{ $t('Settings') }}</span>
</div>
</template> </template>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">

View File

@ -6,7 +6,6 @@
</template> </template>
<script> <script>
import html2pdf from "html2pdf.js"
export default { export default {
name: "DownloadPDF", name: "DownloadPDF",
@ -20,12 +19,7 @@ export default {
}, },
methods: { methods: {
downloadFile() { downloadFile() {
const doc = document.querySelector(this.dom) window.print()
var options = {
margin: 1,
filename: this.name,
}
html2pdf().from(doc).set(options).save()
}, },
}, },
} }

View File

@ -23,8 +23,8 @@
<span v-if="info_row"><small class="text-muted">{{ info_row }}</small></span> <span v-if="info_row"><small class="text-muted">{{ info_row }}</small></span>
</div> </div>
<b-button variant="success" @click="useShoppingListStore().setEntriesCheckedState(entries, !is_checked)" <b-button variant="success" @click="useShoppingListStore().setEntriesCheckedState(entries, !is_checked)"
:class="{'btn-success': !is_checked, 'btn-warning': is_checked}"> :class="{'btn-success': !is_checked, 'btn-warning': is_checked}" >
<i class="fa-fw fas" :class="{'fa-check': !is_checked , 'fa-cart-plus': is_checked }"></i> <i class="d-print-none fa-fw fas" :class="{'fa-check': !is_checked , 'fa-cart-plus': is_checked }"></i>
</b-button> </b-button>
</b-button-group> </b-button-group>
<div class="swipe-action bg-primary justify-content-end"> <div class="swipe-action bg-primary justify-content-end">