معاينات PDF المضمنة

[Discourse]

	ملخص	معاينات PDF المدمجة هو مكون سمة مخصص لأجهزة سطح المكتب فقط، سيسمح لك بإنشاء معاينات للمرفقات بصيغة PDF.
	معاينة	معاينة في منشئ سمات Discourse (أجهزة سطح المكتب فقط)
	رابط المستودع	https://github.com/discourse/discourse-pdf-previews
	جديد في سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

بما أن هذا مكون سمة #رسمي تُعتنى به من فريق Discourse، فيمكن تقديم طلبات #الدعم، و#الإبلاغ عن الأخطاء، و#تجربة المستخدم، و#الميزات في الفئات المقابلة هنا في Meta، مع وضع علامة التصنيف المناسبة لمكون السمة. انقر على أحد الروابط أدناه لبدء موضوع جديد.

 الدعم  خطأ  تجربة المستخدم  ميزة

الميزات

قبل

بعد

كما ذُكر أعلاه، سيعمل هذا المكون فقط على أجهزة سطح المكتب. لا توجد فائدة كبيرة من عرض المعاينات على الأجهزة المحمولة لأن كل شيء سيكون صغيرًا جدًا وصعب القراءة.

يستخدم هذا المكون التنفيذ الأصلي للمتصفح لعرض ملفات PDF، لذا قد تختلف النتائج في المظهر باختلاف المتصفحات.

أيضًا، يرجى ملاحظة أن رفع ملفات PDF غير مسموح به افتراضيًا في Discourse. إذا كنت تريد السماح لمستخدميك برفع ملفات PDF، فستحتاج إلى إضافة هذا الامتداد إما إلى authorized_extensions إذا كنت تريد أن يتمكن جميع المستخدمين من رفع ملفات PDF، أو authorized_extensions_for_staff إذا كنت تريد تقييد ذلك على أعضاء الطاقم فقط.

إذا كنت تستخدم S3، فقد تحتاج أيضًا إلى تحديث سياسة CORS الخاصة بك. يرجى الاطلاع على المنشور أدناه: Inline PDF Previews - #106 by JammyDodger

كيف أستخدمه؟

1. تثبيت المكون
2. السماح برفع ملفات PDF
3. تحديث الصفحة
4. رفع ملف PDF

هذا كل شيء. الباقي يجب أن يعمل تلقائيًا.

الإعدادات

الاسم	الوصف
وضع المعاينة	مدمج: سيتم عرض مرفقات PDF مدمجة داخل المنشورات تبويب جديد: ستؤدي روابط مرفقات PDF إلى نقل المستخدم إلى تبويب جديد حيث سيتم عرض ملف PDF

ميزات إضافية

إذا كنت تريد أن لا يتم عرض ملف PDF معين مدمجًا، فيمكنك ببساطة إضافة مسافة قبل اسم الملف - على سبيل المثال:

هذا سيظهر مدمجًا

[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

هذا لن يظهر مدمجًا

[ sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

مُستضاف لدينا؟ تتوفر مكونات السمات للاستخدام في خططنا القياسية، والأعمال، والمؤسسات.

[travelvc (Ian C)]

I’m hosting my uploads and images on S3, and the preview is blocked by a “CORS policy: No ‘Access-Control-Allow-Origin’ header is present”.

Below is what Chrome console says:

Access to fetch at 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf' (redirected from 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf') from origin 'https://lounge.travelmassive.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Update

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>

[Ed_Bobkov (Ed)]

@travelvc

<AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>

It’s necessary to add, that if you see this text in the error message from origin 'https://lounge.travelmassive.com' has been where your domain is without slash / at the end, then in the CORS configuration you should also add your domain without slash at the end like this:
https://mydiscourse.url

[Johani (Joe)]

@Jeremie_Leroy

could it be a conflict with other plugins ?

I noticed that your uploads are on AWS so, the issue is probably CORS related (the component is not active on your site for me to confirm). See the post below yours.

@travelvc

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

@Ed_Bobkov

It’s necessary to add, that if you see this text in the error message from origin 'https://lounge.travelmassive.com' has been where your domain is without slash / at the end

thanks for sharing that!

Please note that this issue will only affect self-hosters that have set up something like S3. Self-hosters that are not using S3 will not run into this issue. Customers hosted by CDCK will also not need to worry about that since they already have that set up.

That said, CORS configuration is a bit outside of the scope of this topic. If your uploads bucket does not allow your own domain access, then that needs to be fixed regardless since there might be some other issues caused by that.

@rishabh

I’m seeing the same problem

I’m a little bit unsure what happened here. Both cases seem to be working for me everytime I try. We can just chalk it up to a transitory network issue but please let me know if you see it again

I pushed a tiny update to this component that should improve the loading perception, there’s now a theme-color based placeholder instead of the default browser Iframe styles. It only shows up while the file is loading so 99% of the time, you won’t even notice it.

Given that most PDFs will load instantly I didn’t feel like adding a spinner would be worth it.

[pacharanero (Marcus Baw)]

Would it be possible to make PDF Preview suppressable by prepending a space before the upload link, like with oneboxing? Sometimes you want a list of documents and not previews. Sometimes you want a preview.

[paulrudy]

I’m on Safari on MacOS Catalina, and I don’t have anything disabling in-browser PDF display—for instance, http://www.orimi.com/pdf-test.pdf displays fine. But I’m still getting the “Blocked Plug-in” window/message when I view the preview in theme-creator.

Site-specific settings in Safari prefs aren’t any different than other websites.

Is that happening for anyone else?

[paulrudy]

Still not working for me on Safari in MacOS Big Sur. No special settings to blog plugins, and other PDFs display in the browser.

Safari Web Inspector has the following complaints when loading the preview page in theme-creator:
Unrecognized Content-Security-Policy directive 'worker-src'.
Refused to load blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 because it does not appear in the object-src directive of the Content Security Policy.

[nathank (Nathan Kershaw)]

@pacharanero

Would it be possible to make PDF Preview suppressable by prepending a space before the upload link, like with oneboxing?

This would be a vast improvement to this component! Is that doable, @Johani?

[Freez (Damien Lecan)]

@paulrudy

Safari Web Inspector has the following complaints when loading the preview page in theme-creator:
Unrecognized Content-Security-Policy directive 'worker-src'.
Refused to load blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 because it does not appear in the object-src directive of the Content Security Policy.

Same issue for me on Firefox, but only after the 2nd visit
Is there a workaround for this? Manual declaration in the CSP config?

Thank you

[nathank (Nathan Kershaw)]

This has stopped working on my site. I get a big black box instead of the PDF preview:

Disabling plugins via Safe Mode makes no difference, nor does removing every other Theme component.

It has happened after moving image and file uploads to S3, which might be the culprit. I hope not, because they can’t be moved back easily!

I’m stumped. Shame, as it is a great component. Any suggestions?

[keven]

I am seeing the same behaviour with s3 uploads on.

[Benjamin_D (Benjamin Decotte)]

Are you still able to download the pdf ?
Still working for me (s3 + secure media and no cdn)

[nathank (Nathan Kershaw)]

@Benjamin_D

Are you still able to download the pdf ?

Yes, we are. Have the same setup as you (I think).

[Benjamin_D (Benjamin Decotte)]

• my links in the messages are in the form of domain/secure-media-uploads/original/...
• but in the console/network I can see that the actual downloads come from the bucket
  Do you see the amz credential ?

if not maybe this coud help ?

@martin

If you want all uploads retroactively to be analysed and possibly marked as secure, run the uploads:secure_upload_analyse_and_update rake task.

I also remember that something weird was happening when I tried to move a post from categories (or was it a copy/paste?) it finally worked when I re-uploaded the file.

[reclaimedpress]

I am experiencing this same behavior on a fresh discourse installation and a fresh PDF attachment.

[nathank (Nathan Kershaw)]

@Benjamin_D

إذا لم يكن كذلك، ربما يساعد هذا؟

شكرًا لك يا @Benjamin_D. اتضح أن رفع الملفات الآمن غير مفعل لدي، وروابطي تبدو جميعها جيدة وتعمل بشكل صحيح، مثل هذا الرابط:

The HiNZ eHealth Forum - trusted online digital health discussion

لذا أنا في حيرة - خاصةً حول سبب عمله في منتديين أديرهما ولا يعمل في الآخر - مع أن S3 هو الاختلاف الوحيد. وأنك نجحت في جعله يعمل مع S3. أنا حقًا في حيرة من أمري.

[hollosch]

بعد التحديث إلى أحدث إصدار من discourse، لم تعد ملفات PDF المرفقة تُعرض. ما الذي قد يكون المشكلة؟

[omarfilip]

قد يكون هناك تعارض مع مكون أو سمة أخرى. إنه يعمل كما هو متوقع بالنسبة لي. ابدأ بتعطيل المكونات الأخرى وجرب استخدام السمة الافتراضية إذا كانت سمتك مختلفة. الأمر نفسه ينطبق على الإضافات.

[nathank (Nathan Kershaw)]

@nathank

لذا أنا في حيرة من أمري - خاصة فيما يتعلق بالسبب في أن الأمر يعمل في منتديين أديرهما ولا يعمل في الآخر، مع كون S3 هو الاختلاف الوحيد. وأنك نجحت في تشغيله مع S3. أنا حقًا في حيرة.

حسنًا - لقد أحرزت تقدمًا. تعطيل عمليات التحميل إلى S3 يحل المشكلة بالنسبة للuploads الجديدة. لكنني أواجه فوضى بين S3 والمحلي إذا سلكْتُ هذا المسار!

قد يكون الأمر أنني لا أستخدم ميزة CDN (وهي CloudFront) التي تظهر الأخطاء المزعجة في صفحة المسؤول. سأحاول إعداد ذلك وأرى ما إذا كان ذلك سيعمل.

لاحقًا - لا، لا يُحدث CDN أي فرق.

لاحقًا جدًا - تم إزالة عمليات التحميل إلى S3 بنجاح (مع بعض الجهد)، لذا كل شيء على ما يرام الآن.

الآن، أنا متحمس لتحسينه! هل هناك أي شخص موهوب يمتلك المهارات ويهتم بمحاولة ذلك؟

@pacharanero

هل من الممكن جعل معاينة ملفات PDF قابلة للإسكات عن طريق إضافة مسافة قبل رابط التحميل، مثلما يحدث مع oneboxing؟ أحيانًا ترغب في قائمة بالوثائق وليس المعاينات، وأحيانًا أخرى ترغب في معاينة.

[thoka (Thomas Kalka)]

أبحث عن إضافة تسمح بفتح ملف PDF في علامة تبويب جديدة.
السلوك الحالي لمنصتي Discourse يسمح بالتنزيل فقط.
هل من الممكن تحقيق ذلك باستخدام سمة مشابهة؟