Giter Site home page Giter Site logo

using font-face about dinktopdf HOT 10 CLOSED

rdvojmoc avatar rdvojmoc commented on May 14, 2024
using font-face

from dinktopdf.

Comments (10)

rdvojmoc avatar rdvojmoc commented on May 14, 2024 1

Replace your Get method with this one:

public async Task<IActionResult> Get()
        {
            await Task.CompletedTask;

            string cssPath = @"file:///" + _hostingEnvironment.ContentRootPath + @"\wwwroot\fonts.css";

            string html = "<!DOCTYPE html>" +
                          "<html lang = \"en\">" +
                               "<head>" +
                                    "<meta charset = \"UTF-8\">" +
                                    "<title> Check </title>" +
                                    "<link href='" + cssPath + "' rel='stylesheet' type='text/css' media='screen'>" +
                               "</head>" +
                              "<body>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-family: 'MICR Encoding', sans-serif; font-size: 30px;\"> 235 384756  13425346 9877</p>" +
                                    "</div>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-size: 30px;\"> This line doesn not have a font specified</p>" +
                                    "</div>" +
                              "</body>" +
                          "</html>";
            

            var pdf = new HtmlToPdfConverterService(_converter).Convert(html);
            var path = Path.Combine(_hostingEnvironment.WebRootPath, "micr.pdf");
            using (var fs = new FileStream(path, FileMode.Create, FileAccess.Write))
            {
                fs.Write(pdf, 0, pdf.Length);
            }
            return Ok();
        }

As far I know wkhtmltopdf doesn't support relative paths for that reason I added cssPath variable to tell where to look for css file.

In wwwroot create fonts.css and paste this code:

@font-face {
    font-family: 'MICR Encoding';
    font-style: normal;
    font-weight: normal;
    src: url(./micrenc.woff) format('woff');
}

Here is the result of the conversion.

from dinktopdf.

rdvojmoc avatar rdvojmoc commented on May 14, 2024

Can you try with other font format than .ttf, for example ,woff? Look at this issue

from dinktopdf.

rivkawaxman avatar rivkawaxman commented on May 14, 2024

Thanks. However that did not work for me. Am I putting the font file in the right place?

from dinktopdf.

rdvojmoc avatar rdvojmoc commented on May 14, 2024

Please prepare reproducible project and I could take a look.

from dinktopdf.

rivkawaxman avatar rivkawaxman commented on May 14, 2024

Ok here is a test project which resembles my project
https://github.com/rivkawaxman/pdf_convert
Thank you.

from dinktopdf.

rivkawaxman avatar rivkawaxman commented on May 14, 2024

Thank you so much! It's working!

from dinktopdf.

kgrosvenor avatar kgrosvenor commented on May 14, 2024

Is this a cross platform solution @rivkawaxman i.e linux, mac?

from dinktopdf.

avatar commented on May 14, 2024

I tried the solution, using external css, but it's not working for me.
I have a method that generates the html with internal css(tried it with external css too).
If I create a basic html page using the html content generated, the font is used.
The problem is that the pdf doesn't generate using the customFont(as the HTML does), it uses the next one, Arial.

@font-face{
                  font-family: 'customFont';
                  font-style: normal;
                  font-weight: normal;
                  src:url("C:/Users/user/Path/SometOtherPath/customFont.woff"); 
                  // Absolute path for internal css
                  // Relative path for external css 
}
body{
        font-family: 'customFont', Arial, Helvetica, sans-serif;
        font-size: 18px;
}

Is there anything I am missing?

EDIT:
Weirdly enough, if I use a link reference to a css file, it works. That means I am not doing something right with the local css.

from dinktopdf.

hamedapp avatar hamedapp commented on May 14, 2024

Replace your Get method with this one:

public async Task<IActionResult> Get()
        {
            await Task.CompletedTask;

            string cssPath = @"file:///" + _hostingEnvironment.ContentRootPath + @"\wwwroot\fonts.css";

            string html = "<!DOCTYPE html>" +
                          "<html lang = \"en\">" +
                               "<head>" +
                                    "<meta charset = \"UTF-8\">" +
                                    "<title> Check </title>" +
                                    "<link href='" + cssPath + "' rel='stylesheet' type='text/css' media='screen'>" +
                               "</head>" +
                              "<body>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-family: 'MICR Encoding', sans-serif; font-size: 30px;\"> 235 384756  13425346 9877</p>" +
                                    "</div>" +
                                    "<div style = \"text-align: center; margin-top:16px;\">" +
                                        "<p style=\"font-size: 30px;\"> This line doesn not have a font specified</p>" +
                                    "</div>" +
                              "</body>" +
                          "</html>";
            

            var pdf = new HtmlToPdfConverterService(_converter).Convert(html);
            var path = Path.Combine(_hostingEnvironment.WebRootPath, "micr.pdf");
            using (var fs = new FileStream(path, FileMode.Create, FileAccess.Write))
            {
                fs.Write(pdf, 0, pdf.Length);
            }
            return Ok();
        }

As far I know wkhtmltopdf doesn't support relative paths for that reason I added cssPath variable to tell where to look for css file.

In wwwroot create fonts.css and paste this code:

@font-face {
    font-family: 'MICR Encoding';
    font-style: normal;
    font-weight: normal;
    src: url(./micrenc.woff) format('woff');
}

Here is the result of the conversion.

Works for me

from dinktopdf.

sangib58 avatar sangib58 commented on May 14, 2024

In my case i am not able to use font family. Tried in possible all ways(internal css, external css, internal css) but nothing worked.Other css properties are working perfectly.I am using a method to get html. Thanks in advance.

public ActionResult CreatePDF(int id)
{
try
{
string host=Request.Scheme+"://"+Request.Host;
var objGenerator=new CertificateGenerator(_context);

            var globalSettings = new GlobalSettings
            {
                ColorMode = ColorMode.Color,
                Orientation = Orientation.Landscape,
                PaperSize = PaperKind.A4Small,
                Margins = new MarginSettings { Top = 10 },
                DocumentTitle = "",
            };
            var objectSettings = new ObjectSettings
            {
                PagesCount = true,
                HtmlContent =objGenerator.GetHTMLString(id,host),
                //WebSettings = { DefaultEncoding = "utf-8"},
                //WebSettings = { DefaultEncoding = "utf-8",LoadImages=true, UserStyleSheet =  Path.Combine(Directory.GetCurrentDirectory(), @"Resources","Assests", "styles.css") },
                //HeaderSettings = { FontName = FontName, FontSize = 9, Right = "Page [page] of [toPage]", Line = true },
                //FooterSettings = { FontName = FontName, FontSize = 9, Line = true, Center = "This is report footer for testing." },    
            };
            var pdf = new HtmlToPdfDocument()
            {
                GlobalSettings = globalSettings,
                Objects = { objectSettings }
            };
            var file = _converter.Convert(pdf);
            return File(file, "application/pdf");
        }
        catch (System.Exception)
        {        
            throw;
        }
    }

public string GetHTMLString(int id,string host)
{
var cssPath=Path.Combine(Directory.GetCurrentDirectory(), @"Resources","Assests", "styles.css");
var objCertificate=_context.CertificateTemplates.FirstOrDefault(q=>q.CertificateTemplateId==id);
var sb = new StringBuilder();
sb.Append(@"


<title>Certificate</title>
<style>
body {background-image: url("
+host+objCertificate.BackgroundImagePath+")};background-repeat: no-repeat;</style>");
if(objCertificate.TopLeftImagePath.Length>10 || objCertificate.TopRightImagePath.Length>10)
{
sb.Append(@"

");
if(objCertificate.TopLeftImagePath.Length>10)
{
sb.Append(@"Left Logo");
}
if(objCertificate.TopRightImagePath.Length>10)
{
sb.Append(@"Right Logo");
}
sb.Append(@"
");
}
sb.Append(@"
"+objCertificate.Title+"
"+objCertificate.Heading+"
"+objCertificate.MainText+"
");
if(objCertificate.LeftSignatureImagePath.Length>10 || objCertificate.RightSignatureImagePath.Length>10)
{
sb.Append(@"
");
if(objCertificate.LeftSignatureImagePath.Length>10)
{
sb.Append(@"Left Signature");
}
if(objCertificate.RightSignatureImagePath.Length>10)
{
sb.Append(@"Right Signature");
}
sb.Append(@"
");
}
if(objCertificate.LeftSignatureText.Length>5 || objCertificate.RightSignatureText.Length>5)
{
sb.Append(@"
");
if(objCertificate.LeftSignatureText.Length>5)
{
sb.Append(@"
");
}
if(objCertificate.RightSignatureText.Length>5)
{
sb.Append(@"
");
}
sb.Append(@"
");
}
if(objCertificate.LeftSignatureText.Length>5 || objCertificate.RightSignatureText.Length>5)
{
sb.Append(@"
");
if(objCertificate.LeftSignatureText.Length>5)
{
sb.Append(@""+objCertificate.LeftSignatureText+"");
}
if(objCertificate.RightSignatureText.Length>5)
{
sb.Append(@""+objCertificate.RightSignatureText+"");
}
sb.Append(@"
");
}
sb.Append(@"
");
if(objCertificate.BottomMiddleImagePath.Length>10)
{
sb.Append(@"Bottom Image");
}
sb.Append(@"TAPAS"+(objCertificate.CertificateTemplateId<10?('0'+objCertificate.CertificateTemplateId):objCertificate.CertificateTemplateId)+"");
sb.Append(@"Printed on "+DateTime.Now+"");
sb.Append(@"
");

        sb.Append(@"      
                        </body>
                    </html>");
        return sb.ToString();
    }

body{
font-family: 'Courier New', Courier, monospace;
}
.title {
text-align: center;
font-size: 40px;
color: black;
padding-bottom: 35px;
}
.heading {
text-align: center;
color: black;
padding-bottom: 25px;
}
.mainText {
/* font-variant: small-caps; */
font-style: oblique;
font-size: 25px;
text-align: center;
color: black;
padding-bottom: 35px;
}
.topImages{
padding-bottom: 120px;
}
.imgTopLeft{
float:left;
max-width: 150px;
max-height: 150px;
}
.imgTopRight{
float:right;
max-width: 150px;
max-height: 150px;
}
.signatureImages{
padding-top: 120px;
}
.hrLeft{
float:left;
width: 300px;
}
.hrRight{
float:right;
width: 300px;
}
.signatureHrTag{
padding-top: 80px;
}
.signatureText{
padding-top: 20px;
}
.textLeft{
float: left;
}
.textRight{
float: right;
}
.bottomText{
padding-top: 250px;
}
.imgBottomLeft{
float:left;
max-width: 150px;
max-height: 150px;
}
.textBottomMiddle{
padding-left: 400px;
}
.textBottomRight{
padding-left: 400px;
}

from dinktopdf.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.