Вопросы Теги

Как преобразовать подпись подписи в PDF-файл с помощью ajax, javascript и php? [Дубликат]

Этот результат является первым, что всплывает в google, и является более широким, чем то, что происходит здесь. Для экспресс-сервера будет применяться следующее:

Я пытался получить доступ к ресурсам из вложенной папки.

Внутри index.html у меня был

Статический маршрут был установлен на:

app.use(express.static(__dirname));

Но script.js находится во вложенной папке, как в: js/myStaticApp/script.js Я просто изменил статический маршрут на:

app.use(express.static(path.join(__dirname, "js")));

Теперь он работает:)

25
задан GG. 6 December 2016 в 17:57
поделиться

3 ответа

Вы можете добиться этого, используя библиотеку jsPDF и функцию toDataURL .

Я сделал небольшую демонстрацию: 

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// draw a blue cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();

download.addEventListener("click", function() {
  // only jpeg is supported by jsPDF
  var imgData = canvas.toDataURL("image/jpeg", 1.0);
  var pdf = new jsPDF();

  pdf.addImage(imgData, 'JPEG', 0, 0);
  pdf.save("download.pdf");
}, false);
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>


<canvas id="myCanvas" width="578" height="200"></canvas>
<button id="download">download</button>

55
ответ дан Fr3d 19 August 2018 в 07:07
поделиться
  • 1
    приятно спасибо :) и есть ли способ экспортировать PDF с тем же размером (ширина / высота), что и img? – Kasta 19 May 2014 в 12:54
  • 2
    Это возможно, но для этого вам нужно будет отредактировать библиотеку jsPDF. – Fr3d 19 May 2014 в 22:40
  • 3
    Hmm ... попытка, но addImage строка возвращает ошибку ... Я думаю, что функция, возможно, была заменена? – liljoshu 23 August 2016 в 23:28
  • 4
    @Adil Waqar вы добавили файл jspdf.js в качестве скрипта? – Ahmedov 24 August 2016 в 08:13
  • 5
    @MateuszBartkowski Как я ошибаюсь. Он был добавлен, когда кто-то отредактировал мой ответ, чтобы получить фрагмент кода. – Fr3d 2 September 2017 в 19:47

Лучшим решением будет использование Kendo ui draw dom для экспорта в pdf -

Предположим, что следующий html-файл, содержащий тег canvas: 

<script src="http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>

    <script type="x/kendo-template" id="page-template">
     <div class="page-template">
            <div class="header">

            </div>
            <div class="footer" style="text-align: center">

                <h2> #:pageNum# </h2>
            </div>
      </div>
    </script>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <button onclick="ExportPdf()">download</button>

Теперь после этого в ваш сценарий запишет следующее, и это будет сделано: 

function ExportPdf(){ 
kendo.drawing
    .drawDOM("#myCanvas", 
    { 
        forcePageBreak: ".page-break", 
        paperSize: "A4",
        margin: { top: "1cm", bottom: "1cm" },
        scale: 0.8,
        height: 500, 
        template: $("#page-template").html(),
        keepTogether: ".prevent-split"
    })
        .then(function(group){
        kendo.drawing.pdf.saveAs(group, "Exported_Itinerary.pdf")
    });
}

И вот оно: напишите что-нибудь в этом холсте и просто нажмите эту кнопку загрузки, экспортированную в PDF. Вот ссылка на Kendo UI - http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom И блог, чтобы лучше понять весь процесс - https : //www.cronj.com/blog/export-htmlcss-pdf-using-javascript/

1
ответ дан Shiva Dwivedi 19 August 2018 в 07:07
поделиться
  • 1
    Прохладный, но непозволительно дорогой – ejectamenta 21 June 2018 в 09:03

См. https://github.com/joshua-gould/canvas2pdf . Эта библиотека создает PDF-представление вашего элемента canvas, в отличие от других предлагаемых решений, которые вставляют изображение в документ PDF. 

//Create a new PDF canvas context.
var ctx = new canvas2pdf.Context(blobStream());

//draw your canvas like you would normally
ctx.fillStyle='yellow';
ctx.fillRect(100,100,100,100);
// more canvas drawing, etc...

//convert your PDF to a Blob and save to file
ctx.stream.on('finish', function () {
    var blob = ctx.stream.toBlob('application/pdf');
    saveAs(blob, 'example.pdf', true);
});
ctx.end();
5
ответ дан user1860166 19 August 2018 в 07:07
поделиться
  • 1
    Поскольку эта библиотека не просто делает canvas для jpeg и помещает его в PDF-файл, он создает PDF-файл высокого качества / высокого разрешения – Ioulian Alexeev 22 September 2017 в 08:12
  • 2
    хорошая библиотека, но не поддерживает drawmage (), поэтому вы не можете добавлять растровые изображения в PDF – Mr Coder 16 January 2018 в 16:12
  • 3
    Добавлена ​​поддержка изображений. См. Пример изображения в joshua-gould.github.io/canvas2pdf/demo.html . – user1860166 19 January 2018 в 17:56
  • 4
    Позор, что он не поддерживает преобразование контекста, то есть ctx.setTransform (2,1,0,5,1,0,1); Изображение выглядит одинаково – ejectamenta 21 June 2018 в 08:51
Другие вопросы по тегам:

Похожие вопросы: