在下面的代碼中,我使用了npm vue html來打印庫,但是我的打印css由于某種原因無法工作,我不知道它是沒有任何css的唯一打印,我從庫文檔中添加了下面的d樣式代碼。此外,我試圖安裝bootstrap 4.0.0,但它仍然是一樣的沒有行或列對齊,甚至表不顯示,任何幫助嗎? 預先感謝
import VueHtmlToPaper from 'vue-html-to-paper';
Vue.use(VueHtmlToPaper, options);
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=yes'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css'
]
}
export default {
name: 'light-table',
components: {
},
data() {
return {
globalOptions: {
name: '_blank',
specs: [
'fullscreen=no',
'scrollbars=yes'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css',
'https://fonts.googleapis.com/css2?family=Almarai&display=swap'
],
timeout: 1000,
autoClose: true,
// whatever's the window title of the opener
},
}
}
methods: {
print() {
this.$htmlToPaper('printMe', this.globalOptions);
},
showModal(buildingId) {
this.$root.$emit("bv::show::modal", "modal-1", "#btnShow");
this.buildingId = buildingId;
},
hideModal() {
this.$refs["my-modal"].hide();
},
},
}
<div id="printMe" class="row" style="padding: 15px; font-family: 'Cairo', sans-serif !important; ">
<div>
<div>
<b-row class="bodyPrint" style="box-shadow: #4b4746 0px 0px 0px 1000px inset !important">
<b-col> <img src="./assets/darkLogo.jpeg" alt="Company logo" style="max-height: 160px;" /></b-col>
<h4 style="color:white;"> ???? ?????? ???????? </h4>
<h4 style="color:white;">VANTAGE REAL ESTATE COMPANY</h4>
</b-row>
</div>
<br>
<div class="table-responsive" style="overflow-x: clip !important; padding: 25px;">
<table class="table table-bordered">
<thead>
<tr class="tr-class">
<th> ???????</th>
<th>???????</th>
<th>??? ?????</th>
<th>??????</th>
<th> ??? ???????</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"></td>
<td></td>
<td></td>
<td class="mt-3"> </td>
<td></td>
</tr>
</tbody>
</table>
</div>