Flutter Web
I want to download a local pdf document stored in assets/doc.pdf
The code that works in my dev environment. I.e. I'm able to download valid pdf in debug mode locally.
ByteData bytes = await rootBundle.load("doc.pdf");
final blob = html.Blob([bytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
//--
// Downloads the file
var link = html.AnchorElement(href: url);
link.download = 'doc.pdf';
link.click();
html.Url.revokeObjectUrl(url);
Problem
When I build the release build and host it on Firebase hosting, after downloading the same file, the file is only 2KB and contains this text with an error message:
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<link rel="stylesheet" href="loader.css">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="web_portfolio">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>web_portfolio</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="loader">
<div class="lds-circle"><div></div></div>
</div>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js" ></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=2745115030');
});
}
</script>
<script>
head.js("main.dart.js?version=3", function() {
document.getElementById('loader').remove();
});
</script>
<!-- <script src="" type="application/javascript"
onendload="document.getElementById('loader').remove();"></script> -->
</body>
</html>
I have tried multiple browsers.
If I go to build\web\assets\assets, the pdf file is still valid.
I have tried opening the pdf in a new browser tab like so:
ByteData bytes = await rootBundle.load("doc.pdf");
final blob = html.Blob([bytes], 'application/pdf');
final url = html.Url.createObjectUrlFromBlob(blob);
//** opens a new tab with the containing pdf
html.window.open(url, "_blank");
html.Url.revokeObjectUrl(url);
But the path is still wrong and the pdf can't be displayed.
I wonder why it works locally, but paths get messed up when live on firebase hosting?
Related
I'm working on a vscode extension that works with a webview and i'm new to vscode extension and web development.
I made a webview with svelte but everytime i switch to another tab and come back to my webview's tab everything reloads.
I generated the html of the webview by a function who alse load the compiled components made in svelte.
function getGenericHTML(_webview: vscode.Webview, _extensionUri: vscode.Uri , _compiledElementName:string) : string {
// Local path to css styles in media folder
const stylesResetUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","reset.css"));
const stylesMainUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","vscode.css"));
const stylesBootstrap = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","bootstrap.min.css"));
const scriptBootstrap = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri,"media","bootstrap.bundle.min.js"));
// Svelte compiled elements
const scriptUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri, "out", "compiled", _compiledElementName + ".js"));
const cssUri = _webview.asWebviewUri(vscode.Uri.joinPath(_extensionUri, "out", "compiled", _compiledElementName + ".css"));
// Use a nonce to only allow specific scripts to be run
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="img-src https: data:; style-src 'unsafe-inline' ${ _webview.cspSource }; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${stylesBootstrap}" rel="stylesheet" integrity=${"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"} crossorigin="anonymous">
<link href="${stylesResetUri}" rel="stylesheet">
<link href="${stylesMainUri}" rel="stylesheet">
<link href="${cssUri}" rel="stylesheet">
<script nonce="${nonce}">
tsvscode = acquireVsCodeApi();
</script>
</head>
<body>
</body>
<script nonce="${nonce}" src="${scriptUri}"></script>
<script nonce="${nonce}" src="${scriptBootstrap}" integrity=${"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"} crossorigin="anonymous"></script>
</html>`;
}
I need to declare the files to execute once? Did i miss something? Does anyone have some advice?
The full code of the extension is on github: https://github.com/ArkoMO93/al-translations.git
Thanks in advance
This is by design. If the webview is not visible, VS Code destroys it to reclaim memory. The webview is then automatically recreated when it becomes visible again. See https://code.visualstudio.com/api/extension-guides/webview#persistence for details about how to preserve state between unloads and reloads
If this doesn't work for your use case, you can enable retainContextWhenHidden in the WebviewPanelOptions. Again though, only do this if you absolutely need to
How can I host spa project output in CDN and load it in html page like a plugin ? For example Swagger UI can load from CDN and load UI in an HTML tag.
Currently I can do it manually by something like this
const nuxtApp = document.createElement('div');
nuxtApp.id = '__nuxt';
document.querySelector(config.selector).appendChild(nuxtApp);
[
'http://cdn_link/_nuxt/runtime.XXXXX.js',
'http://cdn_link/_nuxt/app.XXXXX.js'
].forEach(src => {
const tag = document.createElement('script');
tag.src = src;
document.body.appendChild(tag);
})
}
The above file I'd manually created based on build output and then in my local html file I can do like this.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="http://cdn_link/lib.js"></script>
<script >
initApp({
selector: '#app'
})
</script>
</body>
</html>
Is there any easier way to create the lib file along with the build of nuxt ?
I was trying to convert the basic viewer example code into a simple vue.js viewer app. When I try to run `npm run serve'(vue-cli).Things are getting rendered correctly and I am getting all the console logs in the console.
But even before the script getting executed the eslint-loader is showing Autodesk is not defined error. But I can see the viewer loaded the document in the background.I will attach a screenshot of it here.
Can someone correct me with the code for creating a basic viewer as a simple vue.js app?
/public/index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- Autodesk Forge Viewer files -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
/src/App.vue
<div id="forgeViewer"></div>
</template>
<script>
export default {
mounted(){
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiMXBQcVhxOFBZVVU0WmtpTURsaGpUSUxCM3I1UEpBWk9kbTY4dTY2R1ZjajhDY3VzYjB3VFVId0E3emZPVk5JRCIsImV4cCI6MTU4ODIzNDEwOX0.zmY_BFmoZgL4TbtSVyTWKlrFdImEKbQTUsfQxBjsPV4';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
}
},
methods:{
onDocumentLoadSuccess:function(viewerDocument){
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
})
},
onDocumentLoadFailure:function(){
console.error('Failed fetching Forge manifest');
}
}
}
</script>
<style>
</style>
You have to fix your Eslint errors one by one.
1.- Declare autodesk as a global in .eslintrc
"globals": {
"Autodesk": true
}
2.- Declare viewer
const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
3.- Remove event listeners if not being used or just console.log(event)
Alternatively you can disable eslint but I'd never recommend that.
check out these working samples here:
https://github.com/dukedhx/forge-tools-hub/blob/master/components/Viewer.vue
https://github.com/alvpickmans/forge-vuer
In the main.js you can add:
Vue.prototype.$Autodesk = window.Autodesk;
And use it in the vue components like below:
this.$Autodesk
I am using gulp-inject to inject some css and js files to the dist/index.html which are located at dist/css/*.css and dist/js/*.js
gulp.task('prep-index', function () {
var target = gulp.src('./dist/index.html');
var sources = gulp.src(['./dist/js/*.js', './dist/css/*.css'], {read: false}, {relative: true});
return target.pipe(inject(sources))
.pipe(gulp.dest('./dist/'));
});
Currently it is injecting files from the base url of the project, but I want it to inject files links relative from target file i.e. dist/index.html
from /dist/css/*.css to css/*.css
and from /dist/js/*.js to js/*.js
But its generating like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Directi Task</title>
<!-- inject:css -->
<link rel="stylesheet" href="/dist/css/basscss.min.css">
<link rel="stylesheet" href="/dist/css/style.css">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script src="/dist/js/jquery.min.js"></script>
<script src="/dist/js/script.min.js"></script>
<!-- endinject -->
</body>
</html>
Any tips on this?
Found the bug, the {relative: true} should be inside the inject() but not within src()
return target.pipe(inject(sources, {relative: true})) fixed the problem.
I'm trying to set up RTMP dynamic streaming via Coudfront but getting "Error loading stream: Manifest not found or invalid" in JWPlayer.
The link to the webiste is http://testiranje7.tk/video_cdn.html and the code that is trying to load the .smil file is:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://jwpsrv.com/library/H5ZwPmjuEe.js"></script>
</head>
<body>
<div id="mediaplayer">Loading the player...</div>
<script type="text/javascript">
jwplayer('mediaplayer').setup({
playlist: [{
sources: [{
file: "http://oregonvedro.s3.amazonaws.com/videos_playlist.smil"
}]
}],
primary: "flash"
});
</script>
</body>
</html>
The .smil file is in Amazon S3 bucket and it holds the following code:
<smil>
<head>
<meta base="rtmp://s2as2xpom4wy97.cloudfront.net:1935/cfx/st/"/>
</head>
<body>
<switch>
<video src="HD_MOV_2_1600.mp4" system-bitrate="1600000" />
<video src="HD_MOV_2_1200.mp4" system-bitrate="1200000" />
<video src="HD_MOV_2_800.mp4" system-bitrate="800000" />
<video src="HD_MOV_2_400.mp4" system-bitrate="400000" />
</switch>
</body>
</smil>
I got the syntax from a site where dynamic streaming appears to be working, but it doesn't work on my site and I can't figure out why....
I copied your html file and smil file and saved them in a same directory.
Then instead of loading the playlist file through http protocal i.e.
file:"http://oregonvedro.s3.amazonaws.com/videos_playlist.smil",
I loaded it as
file: "videos_playlist.smil"
and it worked fine in my computer.
To run it in a domain/ip you might have to use a premium license of jwplayer.