Uncaught (in promise) File 'Roboto-Regular.ttf' not found in virtual file system DataTable - vuejs

user_16343011 0
Viewed 319

I am working with vuejs - DataTable and when I want to generate my report of the tables in pdf I get an error.

while if I generate an excel report it works correctly

my form

<table id="example1" class="table table-bordered table-striped responsive">
                           

     <thead>
                                    <tr>
                                        <th>Id_categoria</th>
                                        <th>Categoria</th>
                                        <th>Fecha(s)</th>
                                        <!--<th>Botones(s)</th>-->
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Id_categoria</th>
                                        <th>Categoria</th>
                                        <th>Fecha(s)</th>
                                    </tr>
                                </tfoot>
                                </table>

my script

<script>
    
    import axios from "axios";
    
    import $  from 'jquery';
    
    import * as pdfMake from 'pdfmake/build/pdfmake';
    import * as pdfFonts from 'pdfmake/build/vfs_fonts';
    export default {
      mounted() {
        this.getUsers();
      },
      methods: {
        getUsers() {
          axios
            .get("https://sistema-control-inventario.herokuapp.com/categoria/")
            .then((response) => {
              var table = $("#example1").DataTable({
                      "responsive": true, "lengthChange": true, "autoWidth": false,
          "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"],
               "language": "",
                data: response.data,
                columns: [
                  { data: "id_categoria" },
                  { data: "categoria" },
                  { data: "fecha" },
                 // { defaultContent : '<button type="button" class="editar btn btn-primary"><i class = "fa fa-pencil-alt"></i></button> &nbsp;&nbsp;&nbsp;<button type="button" class="eliminar btn btn-danger" data-toggle="modal" data-target="#modalEliminar"><i class="fas fa-dumpster-fire"></i></button>'}
                  
                ],
                 
              }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)')
               //obtener_data_editar('',table);
            }).catch((error) => console.log(error.response));
           
        },
        
      },
    };
    
    var obtener_data_editar = function(tbody,table){
        $(tbody).on("click", "button.editar", function(){
            var data = table.row($(this).parent('tr')).data();
            console.log(data)
        })
    }
    
    
    </script>

the page looks something like this

enter image description here

I would be grateful if you could help me to generate the pdf with this button and with the data that are in this one.

Thank you very much.

pd: i am using vue 3 cli

vue.js
1 Answers

Maybe you can try changing the pdfmake imports to be like this:

import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Note the third line which is (probably) the most important one. This is straight from the library's documentation.

Aside from that, I strongly encourage you to reconsider using jQuery here. You'll do much better with Vue.js and vanilla JS alone, especially since Vue uses a virtual DOM so manipulating the actual DOM directly doesn't make any sense.

user_111431110
Related