Discussion :

[d3LTa7]

Bonjour,

J'aimeraiqs savoir s'il est possible d'uploader une font directement dans un fichier JS ?

Voila je vous explique, j'ai un svg avec du texte à l'intérieur et j'aimerais utiliser une certaine police pour celui-ci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <g>       
          <ellipse ry="50" rx="50" id="svg_1" cy="50" cx="50" stroke-width="0" stroke="#000" fill= "${couleur[highlight[h].values[v].c]}"/>
          <text xml:space="preserve" text-anchor="start" font-family="lato" font-size="24" id="svg_2" y="31.5" x="22.5" stroke-width="0" stroke="#000" fill="#FFFFFF">${hv}%</text>
        </g>
      </svg>`

J'ai mis dans font-familly "lato" mais il semble ne pas connaitre cette police...

Je la trouve bien sur google font, mais a partir de là, je ne sais pas comment la uploader directement dans ce fichier JS ( je travail sur VueJS)

J'ai lu quelques truc sur le net mais j'aimerais éviter de passer par d'autre fichier css ou autre

[NoSmoking]

Bonjour,
tu peux faire une insertion dynamique de ta balise link.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const oLink = document.createElement("LINK");
oLink.rel = "stylesheet";
oLink.href = "https://fonts.googleapis.com/css2?family=Lato&display=swap"; // adresse de la font
document.head.append(oLink);

[Doksuri]

si tu te sens gaillard, tu peux passer par le JS developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace

[d3LTa7]

Merci pour ta réponse mais j'ai peur de pas avoir bien compris ta réponse ou alors c'est moi qui n'est pas été clair ! Mais en tout cas je ne vois pas comment utiliser ton code dans mon cas de figure.

Je travail sur un fichier .js qui est un component dans vueJS. Je suis sur un projet de ressortir une partie précise de la page sur un pdf en essayant de suivre exactement le plus possible la partie affiché à l'écran (couleur police placement etc etc), donc cela passe par une fonction (appellé par un bouton "export pdf" sur ma page), J'utilise pdfmake pour ce projet.
Dans ce que je veux faire ressortir sur mon pdf, il y a des cercles de couleur avec des choses écrite dedans, j'utilise donc un svg que j'ai créé via https://editor.method.ac/ , et c'est dans ce svg que j'aimerais changer la police d'écriture.

J'ai bien évidement testé ton code mais cela ne semble pas fonctionner (j'ai copié/collé en prenant soin de changer l'url de la font et j'ai testé en plaçant ces 4 lignes juste avant la fonction et aussi dans la fonction)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
function pdfHLExp (title, highlight) {
  const theme = []
  const content = []
  const backColor =
    { multi: '#E3F2F5', p1: '#FEF2E4', p2: '#FEF2CE', p3: '#FEFAE7', adt: '#FFF5F2', pat: '#FFF2F6', pcut: '#E3F2F5', hdm: '#E6F0F8', gts: '#E6E7F8', asep: '#EEE6F8' }
  const couleur = { gray: '#888888', warning: '#F7A438', danger: '#F9434F', success: '#71CE3C' }
 
  for (let h in highlight) {
    const clas = highlight[h].class
    const col = []
    const tab = [{ columns: col }]
 
    theme.push({ text: highlight[h].title, fontSize: 16, margin: [0, 25, 0, 0], background: backColor[clas], alignment: 'center' })
 
 
    for (let v in highlight[h].values) {
      let hv = highlight[h].values[v].v
      let tv = highlight[h].values[v].t
      let regBr = /<br>/gi
      let tvnobr = tv.replace(regBr, ' ')
      const svg = `
      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <g>       
          <ellipse ry="50" rx="50" id="svg_1" cy="50" cx="50" stroke-width="0" stroke="#000" fill= "${couleur[highlight[h].values[v].c]}"/>
          <text xml:space="preserve" text-anchor="start" font-family="Lato" font-size="24" id="svg_2" y="31.5" x="22.5" stroke-width="0" stroke="#000" fill="#FFFFFF">${hv}%</text>
          <text xml:space="preserve" text-anchor="start" font-family="Lato" font-size="16" id="svg_3" y="55.5" x="9.5" stroke-width="0" stroke="#000" fill="#FFFFF">"${tvnobr}"</text>
        </g>
      </svg>`
 
      col.push({ svg: svg, margin: [0, 10, 0, 0], alignment: 'center' })
    }
    theme.push(tab)
  }
  content.push(theme)
 
  const definition = {
    pageStyle: 'A4',
    content: content,
    footer: (current, count) => {
      return {
        text: `${title} - page ${current}/${count}`,
        fontSize: 6,
        alignment: 'center'
      }
    }
  }
  const filename = `${title}.pdf`
  pdf.createPdf(definition).download(filename)
}

EDIT : Je viens de voir t'as réponse Doksuri ! Merci ! Mais très honnêtement je ne vois pas comment la mettre en pratique