I am trying to Convert some HTML to PDF using PDFMake and htmlToPdfMake in my Vue Project. By default PDFMake only supports Roboto but i wanted to add some custom fonts so I added the Font Files (.ttf) to ./examples/fonts in the PDFMake folder inside ./node_modules. I then used the node build-vfs.js "./examples/fonts" command and compiled a new vfs-fonts.js file. This here is my code.
import pdfMake from "pdfmake/build/pdfmake.js";
import pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake.vfs = pdfFonts.pdfMake.vfs;
const toPdf = document.getElementById("final").innerHTML;
const html = htmlToPdfmake(toPdf);
pdfMake.fonts = {
AbrilFatface: {
normal: "../assets/fonts/AbrilFatface-Regular.ttf",
bold: "../assets/fonts/AbrilFatface-Medium.ttf",
italics: "../assets/fonts/AbrilFatface-Italic.ttf",
bolditalics: "../assets/fonts/AbrilFatface-MediumItalic.ttf",
},
Montserrat: {
normal: "../assets/fonts/Montserrat-Regular.ttf",
bold: "../assets/fonts/Montserrat-Medium.ttf",
italics: "../assets/fonts/Montserrat-Italic.ttf",
bolditalics: "../assets/fonts/Montserrat-MediumItalic.ttf",
},
};
const result = pdfMake.createPdf({
styles: {
alignment: "center",
},
pageSize: {
width: 900,
height: 700,
},
pageOrientation: "landscape",
pages: 2,
content: [html],
});
result.getBase64((data) => {
this.setPdf({
pdf: data,
});
});
As you can see, I have manually set the pdfMake window object, also included the pdfMake and vfs-fonts js files and also provided a pdfMake.fonts object. Even after all this, this error appears:
I have no idea why it doesn't work. Please Help.
OP solved the issue by bringing the fonts into the same directory as the code using it (rather than node_modules).
Nothing should really be added there anyway since it's volatile and usually not accessible on a production server.
Related
How to add custom fonts in react-native 0.61.x. After 0.60+ added auto linking, I dont know how to link custom fonts.
When I execute this command:
react-native link
This make some aditional linking which generate extra error.
So how Can I Link only fonts folder.
create an assets folder in your project directory and then create a fonts folder and paste any custom fonts that you want then add this code snippet to the react-native.config.js file in the root of your project(if the file doesn't exist create it).
module.exports = {
project:{
ios: {},
android: {}
},
assets: ["./assets/fonts"]
}
after all run react-native link to link the resources to your project.
you will be able to use fonts now. for example, I have a yekan.ttf font in my fonts folder you can use it like this:
const styles = StyleSheet.create({
text: {
fontFamily: "yekan",
},
})
as you see use custom fonts without their extension I mean don't put for example .ttf at the end otherwise, it won't work.
create a file in root (react-native.config.js)
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts'], // stays the same
};
Create a folder called assets in root and paste the font file under fonts
folder(assets/fonts/xxxx.ttf)
Run npx react-native link in command line.
You can add custom font in react-native using expo-font.
Install >> expo install expo-font
import * as Font from 'expo-font'
loadFonts=async()=> {
await Font.loadAsync({
// Load a font `Montserrat` from a static resource
popinsmed: require('../../assets/fonts/DMSans-Regular.ttf'),
// Any string can be used as the fontFamily name. Here we use an object to provide more control
Montserrat-SemiBold': {
uri: require('../../assets/fonts/Poppins-Medium.ttf'),
display: Font.FontDisplay.FALLBACK,
},
});
this.setState({ fontsLoaded: true });
}
componentDidMount(){
this.loadFonts();
}
render(){
return(
<View><Text style={{fontFamily:"popinsmed"}}>This is a custom font</Text></View>
)
}
For reference, click here.
I have a React app, attempting for tailwind.macro to work within
emotion notations.
I am using customize-cra to rewire the app, and ${twWHATEVER} is successfully working.
However, it does not seem to inherit the original color themes from
tailwind and I am looking for a solution.
Here is the project:
https://github.com/minagawah/cra-ts-emotion-tailwind-solution
As described in the README, I tried
(1) using babel macro,
and (2) using PostCSS plugins.
I thought it's the backgroundSize problem
as it is discussed in
this issue, but no luck.
Here is how I use the tw macro notation in the app:
# ./src/App.tsx
import styled from '#emotion/styled';
import tw from 'tailwind.macro';
const Button = styled.button`
${tw`mt-4 p-2 text-white bg-red-600`}
`;
And it currently works
because I applied a workaround
for this.
It should apply the default tailwind color themes without the workaround I've applied.
I have been trying to figure out ways, but so far, no luck...
Please, I desperately need a help on this...
EDIT: (2019-09-22)
While I was struggling for bg-red to work, I just found out there's no such thing as bg-red by default... That was something I needed to manually add in tailwind.config.js.
Problem solved.
module.exports = {
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
i had the same issues i fixed by copying the default value from the tailwindcss github in tailwind.config.js.
here is the link to tailwindcss default value
https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L5
I have attached 2 screenshots, one of my vue.config.js and another of a section of the unminified output my build is producing.
Whats happening is this: I want to change the icon paths and the path to the manifest. For whatever reason the official way of changing this is not working. Right now they are blank spaces, however it was not working when it was anything else either ( just tried with 'foo/bar' as the path as I was typing this to triple check ).
I am confused because I seem to be doing everything exactly as I should according to the official docs. Is there anything another set of eyes can spot that I am missing?
Greetings Erik White
At some point I had the same difficulty and solved it as follows:
Copy the images into the "public" folder
example:
We add the folder "favicon" to "public", "favicon" contains 5 images
[project]/public/favicon/favicon-32x32.png
[project]/public/favicon/favicon-16x16.png
[project]/public/favicon/apple-touch-icon-152x152.png
[project]/public/favicon/safari-pinned-tab.svg
[project]/public/favicon/msapplication-icon-144x144.png
To add images in your html: modify the "vue.config.js" and add.
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
iconPaths: {
favicon32: 'favicon/favicon-32x32.png',
favicon16: 'favicon/favicon-16x16.png',
appleTouchIcon: 'favicon/apple-touch-icon-152x152.png',
maskIcon: 'favicon/safari-pinned-tab.svg',
msTileImage: 'favicon/msapplication-icon-144x144.png'
}
// ...
}
}
To change the path and name of "manifest.json" modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestPath: 'my_new_manifest.json',
// ...
}
}
To change the properties of the "manifest.json", (name, images, color, etc) modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestOptions: {
name: 'etc ..',
short_name: 'etc ..',
theme_color: '# f44647',
background_color: '# f44647',
start_url: 'index.html',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: './favicon/favicon-32x32.png',
sizes: '32x32',
type: 'image/png'
},
{
src: './favicon/favicon-16x16.png',
sizes: '16x16',
type: 'image/png'
},
{
src: './favicon/apple-touch-icon-152x152.png',
sizes: '152x152',
type: 'image/png'
},
{
src: './favicon/safari-pinned-tab.svg',
sizes: '942x942',
type: 'image/svg+xml'
},
{
src: './favicon/msapplication-icon-144x144.png',
sizes: '144x144',
type: 'image/png'
},
]
},
// ...
}
}
NOTE
chucks is not a supported parameter.
excludeChucks is not a supported parameter.
If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache.
Remember to see the VUE documentation, it is very detailed, I leave you a link below #vue/cli-plugin-pwa
Nevermind, solved by updating my dependencies.
guessing this was fixed in a patch i didnt catch
I'm compiling my first angular library using rollupjs and I need your help :)
Currently I have a structure like this:
.src
--components
--component1
--component1.ts
--component1.scss
--component1.html
--common
--_variables.scss
And my component1.scss looks like this
#import "../../core/sass/variables";
:host {
.trigger {
&.clear_btn {
color: $color-grey;
}
}
}
My variables.sccs looks like:
$color-grey-light: #e3e3e3;
$color-grey: #bfbfbf;
and my rollup.config.js looks like:
export default {
input: 'build/index.js',
output: {
file: 'dist/common.js',
format: 'es',
},
plugins: [
angular({
preprocessors: {
template: template => minifyHtml(template, htmlminOpts),
style: scss => {
const css = sass.renderSync({data: scss}).css;
return cssmin.minify(css).styles;
},
}
})
],
external: [
'#angular/core',
'#angular/animations',
'#angular/router',
'#angular/platform-browser',
'#angular/forms'
]
};
but when I execute I get this error:
[!] (angular plugin) Error: File to import not found or unreadable: ../../core/sass/variables.
Parent style sheet: stdin
build/app/components/toggle/toggle.component.js
Error: File to import not found or unreadable: ../../core/sass/variables.
Parent style sheet: stdin...
I tried adding importer from node-sass but to be honest I have no idea how to use it to compile everything into css and then inject it to my js (I can actually inject the scss into my template by using rollup-plugin-angular but I don't know how to compile scss)
Any help, tips or suggestions will be really appreciated :)
I'd like to create a Preact component and let folks consume it, even if they're not building Preact apps.
Example: I'd like to build a <MyTooltip> component in Preact, bundle it (along with the Preact runtime), and have folks load it as a script tag use it purely declaratively, perhaps like:
<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">
<my-tooltip content="Tooltip content">Hover here</my-tooltip>
Is there a way to bundle up a component such that it includes the Preact runtime, my library code, and hooks into <my-tooltip> elements?
In other words, can I interop my Preact components as Custom Elements, similar to ReactiveElements?
There's a great library that does this for you called preact-custom-element:
https://github.com/bspaulding/preact-custom-element
class SearchBox extends Component {
render() {
// ...
}
}
registerComponent(SearchBox, 'search-box');
Even though #Jason Miller`s answer helped me a lot, I still had difficulties in producing a basic working example, so here is how I solved this problem from start to finish:
My basic html document including the bundled script dummy.js containing the actual code of my dummy webcomponent:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<script async src="./dummy.js" type="text/javascript"></script>
<dummy-view name="Test"></dummy-view>
</div>
</body>
</html>
My dummy webcomponent:
import {div} from '../utils/hyperscript';
import registerCustomElement from 'preact-custom-element';
const DummyView = ({ name = "World" }) => (
div({}, `Hello, ${name}!`)
);
registerCustomElement(DummyView, "dummy-view", ["name"]);
My webpack config:
const path = require('path');
module.exports = {
entry: {
dummy: './lib/dummy/dummy-view.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
output: {
path: path.resolve(__dirname, 'webcomponent/')
}
};
Some more details:
I installed the preact-custom-element like so npm i preact-custom-element.
Bundling is done using webpack like so: npx webpack.
The index.html will be served under /webcomponent (e.g. http://localhost:3000/webcomponent/).
When visiting the above URL in the browser, the result will look like this:
<div>Hello, Test!</div>
Addendum:
Since I'm using preact I found an alternative approach using preact-habitat, which does something very similar: https://github.com/zouhir/preact-habitat
PreactJS themselves have a library to do just that
https://github.com/preactjs/preact-custom-element
In case you don't want to use another library to keep it slim you can do:
import {h} from "preact";
h("lottie-player", {
src: "/lf30_editor_mjfhn8gt.json",
background: "transparent",
speed: 1,
style: {
width: 300,
height: 300,
},
loop: true,
autoplay: true,
})
I wrote an article on achieving just this:
https://www.jameshill.dev/articles/custom-elements-with-preact/
In addition to other packages mentioned already, there's also:
https://github.com/jahilldev/preactement
It works in a similar way, but allows you to dynamically import your component files when needed, reducing your upfront javascript:
import { define } from 'preactement';
define('my-tooltip', () => import('./myTooltip'));
Disclosure: I'm the author :)