вызов jspdf с помощью vuejs2

Как я могу вызвать javascript jsPDF с помощью vuejs?

var doc = new jsPDF();
var specialElementHandlers = {
  '#editor': function (element, renderer) {
     return true;
   }
};

vuejs2 jspdf
person Alyssa Reyes    schedule 28.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Прежде всего, вы можете создать пользовательскую директиву (Vue.directive) для js pdf.
пример.

<your public directory path>/js_pdf.js



 Vue.directive('js-pdf', {
        twoWay: true,
        priority: 1000,
        deep: true,
        params: ['pdfvalue', "pdfname"], //Add your require variable
        paramWatchers: {

        },

        bind: function () {
            //As per your wish you can set condition
            var self = this;
            setTimeout(function () {
                var doc = new jsPDF()
                doc.text(self.params.pdfvalue, 10, 10)
                doc.save(self.params.pdfname + '.pdf');
            }, 10);

        },
        update: function (value) {
            //As per your requirement you can change data on update method
            var self = this;
            setTimeout(function () {
            }, 10);
        },

        unbind: function () {
        }

    });

Теперь вы можете включить этот файл в свой файл index.html, а также включить библиотеку jsPDF.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script src="<your public directory path>/js_pdf.js"></script>

Затем вы можете использовать эту директиву с вашим элементом ex.

<input type="hidden" id="editor" v-js-pdf pdfvalue="Hello world how are" pdfname="document">//Here "v-js-pdf" is our custom directive

В настоящее время я добавил скрытое поле и взял статическое значение, но вы можете добавить динамическое значение в соответствии с вашими требованиями, и вы можете взять любой другой элемент html в соответствии с вашими требованиями.

person Yashvantsinh Zala    schedule 03.07.2017