HTML страница в PDF Проблемы

У меня есть проект по созданию приложения, похожего на Vista Print. Я создал очень простой интерфейс, который помещает изменяемый размер div в область, которую можно перетаскивать. Я также могу поместить текст в этот div с помощью всплывающего окна iframe с дизайном. Затем я пишу это в базу данных. Затем я вызываю эти данные и создаю PDF, используя Coldfusions cfdocument.

Проблема в том, что при создании PDF шрифт выглядит немного толще, а перенос слов отличается от интерфейса HTML-страницы, что очень важно. Примечание: перенос слов определяется высотой и шириной divs. На странице процесса cfdocument это выглядит хорошо, это просто отключено, когда создается PDF. У кого-нибудь есть какие-либо идеи по этому поводу или можно указать мне информацию, которая может помочь?

Заранее спасибо.

Код здесь:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<cfset webRes = "96">
<cfset pxlWidth = "921">
<cfset pxlHeight = "1178">
<cfset inWidth = (pxlWidth/webres)>
<cfset inHeight = (pxlHeight/webres)>

<cfquery name="qTextData" datasource="ds">
SELECT        DocID, TextID, Width, Height, PosX, PosY, FontFamily, FontColor, FontSize, TextValue
FROM            TextEditor
WHERE        ((DocID = #session.docid#))
</cfquery>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create PDF</title>
</head>
<cfoutput>
<cfdocument filename="mypdf.pdf" name="mypdf" fontembed="yes" format="pdf" overwrite="yes" pageheight="#inHeight#" pagewidth="#inWidth#" pagetype="custom">
    <cfdocumentsection margintop="0" marginright="0" marginbottom="0" marginleft="0">
        <body align="center" marginheight="0" marginwidth="0">
            <div id="pageContainer" style="background-image:url(resources/image.caspx.jpg); background-repeat:no-repeat; height:#pxlHeight#px; width:#pxlWidth#px;">
                <cfloop query="qTextData">
                    <div id="divTextField_#TextID#" style="position:absolute; top:#PosY#px; left:#PosX#px; width:#width#px; height:#Height#px; color:#FontColor#; font-family:#FontFamily#; font-size:#FontSize#pt; vertical-align:text-top; line-spacing:normal;">
                        #TextValue#

                    </div>                  
                </cfloop>
            </div>
        </body>
    </cfdocumentsection>
</cfdocument>
</cfoutput>

<script type="text/javascript">
    window.open('http://linktopdf/mypdf.pdf','newWin','resizable=1');
</script>
</html>
Источник

1 ответ

Я попытался сделать это комментарием, но я начал набирать обороты, и он был слишком большим, поэтому он не может быть "ответом", но если ничего другого, я уверен, что он будет содержать некоторую полезную информацию.

Какой процент вы просматриваете и пытались ли вы распечатать его?

Я заметил, что вещи могут выглядеть однобоко или больше, чем обычно, потому что они просто выглядят странно в акробате (или в вашей программе просмотра PDF). Попробуйте отрегулировать увеличение и посмотреть, изменится ли дисплей, а также посмотреть, правильно ли он печатает.

Я также обнаружил, что, как предположил Джеймс, мне нужны специальные CSS только для документа. CSS может быть таким же странным, как если бы одна сторона элемента div была на 1px больше, чтобы он выглядел правильно. Также имейте в виду, что хотя вы просматриваете PDF-файлы на экране, "print" средства массовой информации. PT означает 1/72 дюйма, который будет выглядеть больше при масштабировании от вашего 19+ дюймового монитора (что также зависит от вашего разрешения пикселей) до листа бумаги размером 8,5 x 11 дюймов, который на самом деле не знает, что такое пиксель является. Возможно, вам придется попробовать настроить размер шрифта на лету, например: font-size: #fontSize-2#pt;, + Изменить -2 ко всему, что может работать на ваш вывод. Вы также можете попробовать использовать модуль, который масштабируется, как em,

Документация cfdocument перечисляет все поддерживаемые CSS, а также определяет некоторые ограничения. Не похоже что line-spacing:normal; поддерживается. Также убедитесь, что все ваши CSS включены в тег или в стиль, но избегайте использования связанного файла.css. Я вижу, вы делаете это, просто добавляя советы и указатели.

Также согласно документам:

ColdFusion не возвращает HTML и CFML вне <cfdocument></cfdocument> пара.

Это означает, что ColdFusion обрабатывает ваши cfset заявления, но это не возвращает

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create PDF</title>
</head>

а также

<script type="text/javascript">
    window.open('http://linktopdf/mypdf.pdf','newWin','resizable=1');
</script>
</html>

Так что вполне возможно, что iText не отображает его так, как вы ожидаете, потому что

  1. Не имеет типа документа
  2. Это плохо сформированный HTML-документ
Источник
Другие вопросы по тегам